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

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

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

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

(1)数组:

父组件:

vue基础学习笔记 --- 组件间数据的传输方式(7种,vue2环境下)_第1张图片

 子组件:

vue基础学习笔记 --- 组件间数据的传输方式(7种,vue2环境下)_第2张图片

 (2)对象:

父组件:

vue基础学习笔记 --- 组件间数据的传输方式(7种,vue2环境下)_第3张图片

 子组件:

vue基础学习笔记 --- 组件间数据的传输方式(7种,vue2环境下)_第4张图片

 (3)更准确的数据(包括数据类型,以及是否必传)

父组件

vue基础学习笔记 --- 组件间数据的传输方式(7种,vue2环境下)_第5张图片

子组件:

 vue基础学习笔记 --- 组件间数据的传输方式(7种,vue2环境下)_第6张图片

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

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

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

父组件:

vue基础学习笔记 --- 组件间数据的传输方式(7种,vue2环境下)_第7张图片

 子组件:

vue基础学习笔记 --- 组件间数据的传输方式(7种,vue2环境下)_第8张图片

3.$Bus全局事件总线

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

适用场景:万能

vue基础学习笔记 --- 组件间数据的传输方式(7种,vue2环境下)_第9张图片

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

vue基础学习笔记 --- 组件间数据的传输方式(7种,vue2环境下)_第10张图片 

 vue基础学习笔记 --- 组件间数据的传输方式(7种,vue2环境下)_第11张图片

 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)匿名插槽:  在封装组件的时候,匿名插槽只有一个

(2)具名插槽:    一个组件中可以有多个  

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

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

7.跨组件传值(在vue3环境下演示)

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

vue基础学习笔记 --- 组件间数据的传输方式(7种,vue2环境下)_第12张图片

 

你可能感兴趣的:(vue,vue.js,学习,前端)