Vue 组件间通信：深入探讨 Props、$ref 和 $emit

2023-12-31 08:52:50

组件间通信的重要性

在 Vue.js 中，每个组件实例都是独立的作用域。这意味着不同组件之间无法直接访问彼此的数据或方法。为了实现跨组件通信，需要建立一种机制来传递信息和触发事件。

Props：传递数据的单向绑定

Props（Properties 的缩写）是用于从父组件向子组件传递数据的首选方法。父组件通过在其模板中使用 v-bind 指令将数据绑定到子组件的 prop。子组件可以使用 props 选项来声明它接受的 prop，并通过 this.propName 访问它们。

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

<!-- 子组件 -->
<template>
  <h1>{{ this.message }}</h1>
</template>

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

$ref：访问子组件实例

$ref 属性提供了一种访问子组件实例的方法。它通过在父组件的模板中使用 ref 属性来指定一个引用名称。然后，父组件可以在代码中通过 this.$refs.refName 访问子组件的实例。

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

<!-- 父组件方法 -->
mounted() {
  console.log(this.$refs.child.count);
}

$emit：触发子组件事件

$emit 方法用于从子组件向父组件触发自定义事件。子组件可以在其模板中使用 v-on 指令来侦听事件，并在触发事件时调用 this.$emit('eventName', data)。父组件可以在其模板中使用 v-on 指令来侦听来自子组件的事件。

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

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

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

<!-- 父组件方法 -->
methods: {
  incrementCount() {
    this.count++;
  }
}