建议收藏:Vue最常用的组件通讯有三种:父->子组件通讯、子->父组件通讯,兄弟组件通讯.(template用的pug模板语法)
Vue最常用的组件通讯有三种:父->子组件通讯、子->父组件通讯,兄弟组件通讯.(template用的pug模板语法)
1.父->子组件通讯
父->子组件通讯,是通过props进行数据传递,并且具有这几个特性,单向传递,子组件接收的数据不可以更改,如果更改,会发出警告,每次父组件更新时,子组件的所有 prop 都会更新为最新值.
1 父组件 2 3 .father 4 Children(:name='msg') 5 6
1 子组件
2
3 .children
4 .box {{name}}
5
6
7
1 2.子->父组件通讯 2 3 一般子->父组件通讯是通过Events事件进行值得传递 4 5 父组件 6 7 .father 8 Children(@hand='hand') //自定义事件1 9 10
1 子组件 2 3 .children 4 input(type='button' value='clickMe' @click='handle') 5 6 7
3.兄弟组件通讯
由上可知,父子组件通讯都会有一个媒介,相当于一个传递信息的介质,才可以使得数据传递过去。兄弟组件通讯业需要一个介质,我们通常称之为事件线~
1.创建一个组件 名字:eventBus(随便起) 我放在了src/asstest/eventBus/index.js文件夹下
1 import Vue from 'vue' 2 export default new Vue()
2.创建第一个兄弟组件,名字:Emit
1 2 .emit 3 .box Emit组件a 4 button(@click='show') 向on组件传值 5 6 7
3.创建第二个兄弟组件,名字:On
1
2 .on
3 .cont 接受emit组件的数据:{{msg}}
4
5
6
在vue中常用的传值方式也就是这三种,但方放不局限于这三种。