活用Vue父子组件通信的三种途径：props、$emit、$parent

2024-02-19 06:22:17

父子组件通信：Vue 中亲密而关键的机制

在 Vue.js 的世界中，组件是构建用户界面的基石。这些可重用的模块允许我们创建复杂且可维护的应用程序，而父子组件之间的通信是关键所在。本文将深入探讨 Vue 中父子组件通信的三种主要方法：props、emit 和 parent。

props：传递数据的桥梁

props 是父子组件通信最简单直接的方式。它允许父组件将数据传递给子组件。父组件在子组件标签中声明 props 属性，指定要传递的数据，而子组件则通过 props 属性接收这些数据。

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

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

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

$emit：触发事件，传递信息

emit 是父子组件通信的另一种强大机制。它允许子组件触发事件，并将事件数据传递给父组件。子组件通过 emit 方法触发事件，而父组件则在子组件标签中监听事件，接收数据。

<!-- 子组件 -->
<template>
  <button @click="$emit('increment-count')">增加计数</button>
</template>

<!-- 父组件 -->
<template>
  <child-component @increment-count="incrementCount"></child-component>
</template>

<script>
export default {
  methods: {
    incrementCount() {
      // 在这里处理从子组件传递的数据
    }
  }
}
</script>

$parent：访问父级数据和方法

parent 提供了一种直接访问父组件实例及其数据的途径。子组件可以通过 parent 属性访问父组件的实例，获取其数据和方法。

<!-- 子组件 -->
<template>
  <div>父组件消息：{{ $parent.message }}</div>
</template>

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