Vue 祖孙方法调用 祖父级方法在孙级调用 祖孙传参

有需求子元素的子元素（孙子级别的元素）获取到的值要传递给祖父级

祖父级代码：

• 新增方法：provide ( ) 与生命周期同级

data() {
	……
},
// 与生命周期同级
provide() {
  return {
    //子组件调用的名字：对应的方法（当前页面，祖父级元素的方法）
    openList: this.openList
  };
},
mounted() {
	……
},
methods: {
  openList(type) {
	// 逻辑代码
	console.log(type);
  },
}

孙级别代码：

• 定义祖父级设置好的参数 - 与生命周期同级

name: "waterPieCom",

// 导入祖父级定义的名称
inject: ["openList"],
data(){
	...
}
mounted() {
	// 任意位置调用，与当前文件下的调用相同
	this.openList(type)
}

传递参数

• 若需传递参数则在祖父级页面方法中进行赋值即可

data() {
  return {
  	//初始化定义数据
	value:''
  }
},
methods: {

  openList(type) {
	// 赋值
	this.value = type
  },
}