Vue常用知识速记

308 阅读1分钟

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"})