vue祖孙组件间传值

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组件的方法即可
}