组件间通信总结

Q1:各类组件如何通信？

1、父子组件间通信

• 子组件通过 props 属性来接受父组件的数据，然后父组件在子组件上注册监听事件，子组件通过 emit 触发事件来向父组件发送数据。
• 通过 ref 属性给子组件设置一个名字。父组件通过 $refs 组件名来获得子组件，子组件通过 $parent 获得父组件，这样也可以实现通信。
• 使用 provide/inject，在父组件中通过 provide提供变量，在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深，只要调用了 inject 那么就可以注入 provide中的数据。

2、跨代组件间通信

• 跨代组件间通信其实就是多层的父子组件通信，同样可以使用上述父子组件间通信的方法，只不过需要多层通信会比较麻烦。
• 使用上述的6种方法的$attrs / $listeners方法。

3、兄弟组件间通信

• 通过 $parent + $refs 以父组件为中间人来获取到兄弟组件，也可以进行通信。

4、任意组件间通信

• 使用 eventBus ，其实就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象，通信的组件引入这个实例，通信的组件通过在这个实例上监听和触发事件，来实现消息的传递。

Q2：若父组件有个getName（）函数，如何获得子组件的值？

• 答题思路：父组件如何获得子组件值？
  • 可以通过this.$refs.子组件名称.数据名称来获得
  • 可以通过this.$children[index].数据名称 获得
  • 可以通过eventBus访问，子组件先把数据用emit放入，父组件用emit放入，父组件用emit放入，父组件用on取
  • 可以通过在子组件用v-on绑定一个事件，在子组件内使用$emit触发这个事件，触发的时候同时传递参数

1 props / $emit

props

适用：父组件向子组件传值

特点：

• props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父组件的更新而响应式更新。
• props可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以是传递一个函数。
• props属性名规则：若在props中使用驼峰形式，模板中标签需要使用短横线的形式来书写。

用法：

• 父组件内调用子组件，通过v-bind=变量名，进行传参,v-bind简写：
• 子组件通过props: ["变量名1", "变量名2"]进行接收参数,模版里直接使用

// 父组件
data() {msgData: "父组件数据";
},
methods: {myFunction() {console.log("vue");}
},

// 子组件
{{msg}}
export default {props: ["msg", "fn"]
};

$emit

适用：子组件向父组件传值

用法：

• 在子组件中绑定一个事件，在事件里写this.$emit('写在父组件的函数名字', 要传的值)
• 父组件在子组件注册一个@父组件触发函数（传的值）{}，@为v-on的简写，这样就可以使用这个传的值了

// 父组件

//子组件

2 ref / $refs

适用：

• 父组件适用子组件的方法和数据

使用：

• 数据：父组件调用this.refs.child，如果是访问变量this.refs.child，如果是访问变量 this.refs.child，如果是访问变量this.refs.子组件名称.子组件data里的变量
• 方法：访问变量 this.$refs.子组件名称.子组件methods里的方法

3 EventBus

适用：多个组件访问一个数据

使用

• 放数据：EventBus.$emit
• 拿数据：EventBus.$on

// 需要创建一个event-bus.jsimport Vue from 'vue'
export const EventBus = new Vue()

//组件1（放数据）：在方法里使用
EventBus.$emit('addition', {num:this.num++
})

//组件2（接收数据）
EventBus.$on('addition', param => {this.count = this.count + param.num;//使用num变量})

4 依赖注入（provide / inject）

适用：

父对子传参，一般用于深层的传参，可以避免一层层传参。

使用：

provide（发生）和inject（接收）是vue提供的两个钩子

//父组件
provide() {return {num: this.num};
}

//子组件
inject: ['num']

5 $parent / $children

适用：

• $parent 子组件获取父组件值
• $children 父组件获得子组件的值
  • 在组件中使用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的

6 $attrs / $listeners

适用：

• $attrs：父给子、孙传props，可以避免多次写传参，只要绑定属性，下面一层就可以收到上层的参数
• $listeners：孙给爷传参数，调用父组件方法

使用：

• 子组件：v-bind="$attrs" v-on="$listeners"，孙组件就可以用爷组件的数据

//爷

// 父

// 子

参考链接

• https://blog.csdn.net/jiangjunyuan168/article/details/122640925?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522167807140216800182189905%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=167807140216800182189905&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_positive~default-1-122640925-null-null.142^v73insert_down2,201^v4add_ask,239^v2insert_chatgpt&utm_term=vue组件通信&spm=1018.2226.3001.4187