vue 多层子组件调用父组件的方法（传参方式bind方法 或 注入 provide() {}方法）

一，传参方式bind的方法的使用

例:
1.ui作为一个对象

data() {
    return {
    ui:{}//ui作为一个对象
  	}
}

2.初始化中，给ui绑定一个方法editDesignTree，使用bind指针指向某个具体方法

//初始化中，给ui绑定一个方法editDesignTree，使用bind指针指向某个具体方法
init(){
this.ui.editDesignTree = this.editDesignTreeFun.bind(this)
},
editDesignTreeFun(val){
//方法内写需要的操作
}

3.把ui作为参数传递给子组件

<child :ui='ui'></child>

4.子组件方法中需要调到editDesignTreeFun方法的话

handleNodeTableClick（）{
	//判断editDesignTree方法是否存在，存在就调整
      if (this.ui.editDesignTree && typeof this.ui.editDesignTree == 'function') {
          this.ui.editDesignTree(val)
      }
}

二，注入provide() {}的使用

1.父组件中， provide() {}跟data平级，提供一个方法

 provide() {
    return {
      //isTableNeedShow: this.isTableNeedShow.bind(this),
      editDesignTree: this.editDesignTreeFun.bind(this)
    }
  },

  methods: {
	editDesignTreeFun（val）{
		//需要的操作
	}
}

2.子组件中，可以是孙组件或者嵌套多层的组件

inject这个方法，和data平级

inject: ['editDesignTree'],

使用：

handleNodeTableClick（）{
    this.editDesignTree(val)
}

三，两者之间的区别和优缺点

1.使用传参方式bind的方法：
优点：简单，子组件会被多个不同的父组件调用的话 建议用这个方法，因为如果子组件使用了注入方法的话，但有些父组件页面不需要，就没有provide（）{}提供方法的话，子组件会报错。
缺点：需要把ui（data中自定义的对象），传递下去，子组件才能使用挂载在ui上的方法

2.provide(){}注入方法
优点：不需要传参给子组件，直接穿透所有子组件，不管嵌多少层都能使用
缺点：子组件需要调用父组件上提供的方法的话，父组件必须provide提供方法，如果子组件inject了某方法，但是父组件没有提供，就会报错。

*也可用于传普通参数