Vue组件通信

单向数据流通信

单向数据流通信是指父组件传递数据给子组件,子组件是不可以修改该数据的(可以改,但会警告)

父组件通过自定义属性传递数据给子组件,子组件使用props接收

如果想修改数据,子组件需要使用$emit发布一个自定义事件,父组件用v-on进行监听来修改数据

 

双向数据绑定

子组件修改父组件传递的数据

1.使用sync

 

在父组件里自定义一个属性使用sync

在子组件里接收数据修改数据的时候使用update达到双向数据绑定,这时候子组件点击按钮父组件的数据show会改变

 

2.使用v-model指令

在父组件里使用v-model指令控制数据

在子组件里接收的参数名要写成value,然后发布input事件修改数据

 

事件总线

寻找俩个组件共有的对象,并且这个对象有发布和监听事件俩方法,可以自己创建这样的对象或者事件new Vue跟实例

利用这俩个事件可以进行跨组件传递事件,他有很大的缺点,组件都可以改变数据,这样会导致数据混乱

在一个组件里引入俩组件,成为兄弟组件

在child组件里有个按钮,发布一个Handler事件传递一个数据

然后在brother组件里监听Handler事件接收数据

 

posted @ 2018-12-06 16:52  cher。  阅读(114)  评论(0编辑  收藏  举报