子组件如何调用父组件？这三种方法一定知道

2023-02-08 07:51:10

子组件调用父组件：Vue中的三种方法

在Vue中，子组件与父组件之间的通信至关重要，它使组件能够相互传递数据和事件。本文将探讨子组件调用父组件的三种常用方法：prop、event和ref，深入分析每种方法的特点和适用场景。

prop：传递数据

prop是子组件从父组件接收数据的一种单向数据流机制。父组件在子组件的定义中声明prop，指定其类型和默认值。子组件通过this.propName访问父组件传递的数据。

示例：

<!-- 父组件 -->
<child :message="message"></child>

<!-- 子组件 -->
<template>
  <p>{{ message }}</p>
</template>

<script>
  export default {
    props: ['message']
  }
</script>

在上面的示例中，父组件通过message prop向子组件传递数据。子组件通过this.message访问该数据并在模板中渲染。

event：触发事件

event是子组件向父组件发送数据的另一种机制。子组件通过this.$emit('eventName', data)触发父组件的事件。父组件在子组件的定义中声明该事件并指定事件处理函数。

示例：

<!-- 父组件 -->
<child @click="handleClick"></child>

<!-- 子组件 -->
<template>
  <button @click="$emit('click')">点击</button>
</template>

<script>
  export default {
    methods: {
      click() {
        this.$emit('click');
      }
    }
  }
</script>

在此示例中，子组件通过@click="$emit('click')"触发父组件的handleClick事件。父组件通过@click="handleClick"声明事件处理函数，当子组件被点击时，该函数将被调用。

ref：获取实例

ref用于子组件获取父组件实例。子组件通过ref="refName"获取父组件的实例。父组件通过this.$refs.refName访问子组件的实例。

示例：

<!-- 父组件 -->
<child ref="child"></child>

<!-- 子组件 -->
<template>
  <p>我是子组件</p>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$parent);
    }
  }
</script>