provide是一个对象或返回一个对象的函数。该对象包含可注入其子孙的property
在最外层组件(祖先)使用provide,如下:
data() {
return {
featureQuery: {
layerList: [], //图层列表数据
layerType: "", //图层类型(symbol:点,line:线)
layerCode: "", //图层code
},
}
},
provide() {
return {
queryData: this.featureQuery
}
},
当然this.featureQuery可以改为this,element的组件中也是用的this,但页面中变量及方法比较多,担心会有性能方面影响,故而只注入部分使用到的变量。
在需要用到这些变量的页面中使用inject,如下:
inject: ['queryData'],
watch: {
"queryData.layerCode": {
handler(obj) {
},
deep: true,
},
},
然后即可在该页面直接this.queryData.layerCode使用,也可以进行监听。这样即完成了祖先向子孙传值
如果子组件需要调用父/祖先的方法,第一种可以将上面的this.featureQuery改为this,然后直接在子孙组件通过this.queryData[方法名]即可,另一种就是通过emit传回去,可以使用$listeners,使用方法如下
有A、B、C三个页面,B是A的子组件,C是B的子组件
C组件
//页面点击事件
handleClick(data) {
this.$emit("current-layer", data);
}
B组件(页面引入C组件的地方添加v-on=“$listeners”)
<C v-on="$listeners"></C>
A组件
<B @current-layer="handleChangeLayer"></B>
handleChangeLayer(data){
//这里调用A组件的方法即可
}