在vue的模块通讯中,通常遵从大项报文准则,大部份的 prop 都使其兄弟二人 prop 间逐步形成了两个双向上行存取:父级 prop 的预览会向上壳状到子模块中,但如此一来则没用。
上面如是说三种fork形式
1,父陈谟
透过propsfork,转交时明确规定响起的表达式的正则表达式(type)和缺省(default)和与否关主(require)
例:父模块中
子模块中{{ data }}
props:{
data:{
type: Object,
default:()=>{}
}
}
2,子传父
在子模块的条码上自订两个该事件,透过this.$emit()传达模块第一类,接着在父模块中转交。
例:子模块中
sendData(){
this.$emit(handleChange,true)// true为须要传达的模块第一类
}
父模块中
getData(val){
console.log(val)//结果为true
}
3、兄弟模块(平级传达)
利用中央该事件总线—-eventbus
首先在main.js中添加两个生命周期函数,在里面定义个bus指向vue实例
new Vue({
el:#app,
beforeCreate(){
vue.prototype.$bus = this
},
render: h =>h(App)
})
接着,在模块1中使用$on去监听自订该事件,触发模块2的模块fork,渲染到模块1中,
模块1{{data}}
mounted(){
this.$bus.$on(“getData”,(i)=>{
this.data = i
})
}
模块2
sendData(){
const data =123
this.$bus.$emit(“getData”, data)
}
4、使用vuex把公共数据存储到vuex中
5、使用provide和inject(适用祖孙模块fork)
provide
是两个第一类或返回两个第一类的函数。该第一类包含可注入其子孙模块的数据
inject:两个字符串数组,或两个第一类。如果是第一类,第一类的 key 是本地的存取名,value 是,包含from和default缺省。
例:父模块中
export default {
data(){
return {
parentValue:123
}
}
provide(){
val: this,
parentVal: parentValue
}
}
孙模块中,注入inject
export default {
inject:[val,parentVal]
}
created(){
console.log(this.val, this.parentVal)
}
6、$parent和$children,这个我没用过