建议收藏:Vue最常用的组件通讯有三种:父->子组件通讯、子->父组件通讯,兄弟组件通讯.(template用的pug模板语法)


 Vue最常用的组件通讯有三种:父->子组件通讯、子->父组件通讯,兄弟组件通讯.(template用的pug模板语法)

1.父->子组件通讯

  父->子组件通讯,是通过props进行数据传递,并且具有这几个特性,单向传递,子组件接收的数据不可以更改,如果更改,会发出警告,每次父组件更新时,子组件的所有 prop 都会更新为最新值.

 1 父组件
 2 
 6 
1 子组件
2  
6 
7 
 1 2.子->父组件通讯
 2  
 3    一般子->父组件通讯是通过Events事件进行值得传递
 4  
 5  父组件
 6   
 9  
10 
 1 子组件
 2 
 6 
 7 

3.兄弟组件通讯

  由上可知,父子组件通讯都会有一个媒介,相当于一个传递信息的介质,才可以使得数据传递过去。兄弟组件通讯业需要一个介质,我们通常称之为事件线~

1.创建一个组件  名字:eventBus(随便起) 我放在了src/asstest/eventBus/index.js文件夹下

1 import Vue from 'vue'
2 export default new Vue()

2.创建第一个兄弟组件,名字:Emit

 1 
 6 
 7 

3.创建第二个兄弟组件,名字:On

 1 
 5 
 6 

在vue中常用的传值方式也就是这三种,但方放不局限于这三种。

vue