父子传值,使用 provide & reject

优点:不管多少层,都可以直接使用祖父节点的属性和方法

注意:

1. 如果属性是对象(比如testData2),那么是可以实现响应式变化,即祖父组件改变值,子孙组件都会相应变化

2. 如果属性是值(比如testData1),那么直接使用是无法实现响应式变化的,这时可以把testData1在provide里指定为用方法来获取

祖父:index.vue

data() {
    return {
        testData1: 0,
        testData2: {count: 0},
    }    
}
provide(){
    return {
      Test: this.myTest,
      Test2: this.myTest2,
      data1: () => { return this.testData1 },
      data2: this.testData2,
    }
},
myTest(e){
  console.log("myTest: ",e);
},
myTest2(e){
  console.log("myTest2: ",e);
},

父组件:child.vue

// 啥都不用干

子组件:child.vue



inject: {
    Test: 'Test',
    Test2: 'Test2',
    data1: 'data1',
    data2: 'data2',
},
created(){
    console.log("我是dictTableTable,我的参数tableName=",this.tableName);
    console.log("我是dictTableTable,我的参数tableName2=",this.tableName2);
},
methods: {
    callGrandFather(){
      this.Test(this.tableName)
      this.Test2(this.tableName2)
    }
}

你可能感兴趣的:(vue,vue.js)