从零开始：探索 Vue.js 3.x 组件通信

2023-11-11 04:26:34

Vue.js 3.x 组件通信指南

在 Vue.js 3.x 中，组件通信是构建交互式应用程序的关键。本文将探讨常用的组件通信方法，帮助您充分利用 Vue.js 的通信功能。

Props：父子组件传参

Props（Properties）是一种单向数据流，允许父组件向子组件传递数据。父组件通过自定义属性向子组件传递参数，子组件通过 props 选项接收这些参数。

例如，父组件 <My-Component> 传递一个 message prop 给子组件 <Child-Component>：

<template>
  <My-Component :message="greeting"></My-Component>
</template>

<script>
export default {
  data() {
    return {
      greeting: 'Hello from parent!'
    }
  }
}
</script>

在子组件中，通过 props 选项接收 message：

<template>
  <p>{{ message }}</p>
</template>

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

emit、parent、$refs

除了 Props，Vue.js 还提供了其他灵活的通信方法：

$emit： 用于从子组件向父组件触发事件。
$parent： 允许子组件访问其父组件的实例。
$refs： 允许组件通过引用访问其他组件。

例如，一个子组件想要触发一个名为 updateCount 的事件，并传递一个 count 参数：

<template>
  <button @click="incrementCount">+</button>
</template>

<script>
export default {
  methods: {
    incrementCount() {
      this.$emit('updateCount', this.count)
    }
  }
}
</script>

在父组件中，可以使用 v-on 侦听事件：

<template>
  <My-Component @updateCount="incrementCount"></My-Component>
</template>

<script>
export default {
  methods: {
    incrementCount(count) {
      this.count += count
    }
  }
}
</script>