老生常谈vue3组件通信方式_vue.js_

vue3七种组件通信方式

面试题经常会问到vue3组件间的通信方式，下文列举了七种常见的通信方式。

• props
• emit
• v-model
• refs
• provide/inject
• eventBus
• Vuex4/pinia(vuex5)

1. Props方式

父组件以数据绑定的形式声明要传递的数据，子组件通过defineProperty()方法创建props对象，即可拿到父组件传来的数据。

父组件的template中：

子组件：

注意在

2. emit方式

emit方式也是Vue中最常见的组件通信方式，该方式用于子传父；

父组件的template中：

子组件中：

const emits = defineEmits(['add']) emits('add', 1) 

3. v-model方式

v-model不能严格成为数据的传递方式，其实只是减少了代码量。

 // 等价于 

子组件需要emit一个叫update:xxx的事件，再把需要更新的响应式数据传给emit方法的第二个参数即可，如：

const emits = defineEmits(['update:list']) emits('update:list', arr) 

4、Refs

有时候想访问 r e f s 绑 定 的 组 件 的 属 性 或 者 方 法 ， 我 们 会 使 用 refs绑定的组件的属性或者方法，我们会使用 refs绑定的组件的属性或者方法，我们会使用refs。但是Vue3不同于Vue2，在 Vue3的setup中我们是无法访问到this的，所以我们需要借助一个方法，那就是getCurrentInstance，该方法返回了当前的实例对象。

父组件如下：

子组件代码如下：

注意⚠️，通过