1. 组件通信
父子通信:
父—>子, 父传递数据使用 :xx= 'data',子拿取数据使用属性props:['xx']
props:{ xx: { type: Array, default: [0,0,0] }
}
子—>父 , 使用事件触发方式,子传递数据使用this.$emit('doSome', 'data')定义触发的事件,并在第二个参数中将对应的数据传过去,父中在调用组件中加上@doSome = 'oneFunction', 在oneFunction(data){}中调用数据。
若无事件触发交互时,父组件也可以直接给子组件设置ref通过this.$refs.oneChild.data来拉取数据。(从dom实例中拉取)
可以使用 :oneFoo.sync="xx" 在父组件 实现双向绑定,相当于 :oneFoo="xx" @doSome:oneFoo="data=>oneFoo=data", 子组件只需要在数据改变时触发doSome就可以了。
优点:父子数据实时同步,sync语法糖很简单的实现。
缺点:双向绑定破坏了单项数据流的简洁,增加了数据分析难度。
组件间通信:
使用eventHub let hub = new Vue(); hub.$emit("change", "xx")
hub.on('change', ()=>{this.msg = "xx"})