vue基础学习笔记 --- 组件间数据的传输方式（7种，vue2环境下）

1.props传输  ---- 父组件向子组件进行传递

• 使用方式：在父组件中使用子组件的标签中将要传输的数据用v-bind（也可以用：）进行绑定；在子组件中props声明要接收的数据，可以传输三种方式：数组、对象、以及更准确的数据（包括数据类型，以及是否必传）

• 注意：如果父组件要向子组件的子组件传递数据，那么要逐层进行传递；如果兄弟组件之间要进行数据通信，也不能直接使用props，必须要通过父组件进行传递

（1）数组：

父组件：

 子组件：

 （2）对象：

父组件：

 子组件：

 （3）更准确的数据（包括数据类型，以及是否必传）

父组件

子组件：

 

 2.自定义事件传输数据  --- 子组件向父组件传输数据

• 使用方法：在父组件中自定义一个函数，并且在使用子组件的时候 v-on或@绑定该自定义函数；在子组件中用this.$emit('事件名称'，参数)来触发父组件中的函数调用

• 注意：该方法只适用于子组件向父组件传递数据，不能跨组件使用，也不能在兄弟组件间使用

父组件：

 子组件：

3.$Bus全局事件总线

原理：组件实例的原型的原型指向vue.prototype

适用场景：万能

***在需要接收数据的组件定义自定义事件

 

 

 4.pubsub-js 发布订阅

在vue中使用较少，在react中使用偏多，是万能的，

（1）安装pubsub-js：npm i pubsub-js -S

（2）执行订阅事件：（绑定事件监听）

                                PubSub.subscribe("消息名称（相当于事件名）"，（event，data）=>{})

（3）执行发布事件：

                                PubSub.publish("消息名称（相当于事件名）"，data) 

5.Vuex[仓库]

数据非持久化，是万能的

有5个属性：state、mutations、actions、getters、modules

6.插槽 slot

用于父子间通信

作用域插槽：子组件的数据来自于父组件，但是子组件的自己的结构由父组件决定

插槽可分为三种：

(1)匿名插槽：<slot></slot>  在封装组件的时候，匿名插槽只有一个

(2)具名插槽：<slot name=""></slot>    一个组件中可以有多个  

        使用方法：在标签中 v-solt：#名

(3)作用域插槽：有props的就是作用域插槽，定义子组件时，在slot上绑定props；在父组件中使用子组件时，插槽容器上通过slot-scope来接收 子组件中插槽抛出来的数据。

7.跨组件传值（在vue3环境下演示）

需求：父组件给孙组件传值，中间隔了一个子组件