vue父子组件间怎么进行通讯

Vue父子组件通讯概述

Vue.js 是一个响应式的前端 MVVM 框架，其中，父子组件间的通讯是一件非常常见的需求，我们通常使用 props 和 events 两种方式来实现父子组件的通讯，此外，Vue.js 还提供了 provide 和 inject、$attrs 和 $listeners 两种方式来实现更深层次的跨层组件通讯。

使用 Props 实现父组件向子组件通讯

使用 Props 实现父组件向子组件通讯，可以通过在子组件中定义 props 属性，然后在父组件中通过传递属性值来向子组件传递数据。下面是一个实例：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: {
    message: String,
  },
};
</script>


<template>
  <div>
    <my-component message="Hello World!"></my-component>
  </div>
</template>

<script>
import MyComponent from "./MyComponent.vue";
export default {
  components: {
    MyComponent,
  },
};
</script>

使用 Events 实现子组件向父组件通讯

使用 Events 实现子组件向父组件通讯，可以通过在子组件中使用 $emit 方法触发一个父组件监听的事件，然后在父组件中使用 v-on 指令来绑定事件的处理函数。下面是一个实例：

<template>
  <div>
    <button @click="$emit('say-hello')">Say Hello</button>
  </div>
</template>


<template>
  <div>
    <my-component @say-hello="handleSayHello"></my-component>
  </div>
</template>

<script>
import MyComponent from "./MyComponent.vue";
export default {
  components: {
    MyComponent,
  },
  methods: {
    handleSayHello() {
      console.log("Hello World!");
    },
  },
};
</script>

使用 Provide / Inject 实现祖先和后代组件通讯

使用 Provide / Inject 实现祖先和后代组件通讯，可以通过在祖先组件中使用 provide 方法提供数据，后代组件中使用 inject 方法注入数据。下面是一个实例：

<template>
  <div>
    <my-component></my-component>
  </div>
</template>

<script>
export default {
  provide () {
    return {
      message: 'Hello World!',
    };
  },
};
</script>


<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  inject: ['message'],
};
</script>

总结

以上介绍了四种在 Vue.js 中实现父子组件通讯的方式，它们分别是 props、events、provide / inject 和 $attrs / $listeners。其中，props 主要用于父传子，events 主要用于子传父，provide / inject 用于祖先和后代组件间的通讯，$attrs 和 $listeners 用于较为复杂的情况。

在实际开发中，我们需要根据具体的需求来选择合适的通讯方式，以实现代码复用和组件的解耦。（共1205字）