Vue之provide和inject组件异步传值

方法一、实现响应式传值方法：传递的参数用一个方法返回【推荐使用】

父组件provide

<script>
export default {
  provide() {
    return {
      testVal: () => this.list,
      testMethods: this.testM
    }
  },
  data(){
    return {
      list:[]
    }
  },
  methods:{
    getListData(isCheck) {
      // todo 调用接口 给 list赋值 
      this.list = res.data
    }
  }
}
</script>

子组件inject

<template>
  <div>
    testVal {{ testVal() }}
    getValTest-- {{ getValTest }}
    <button @click="testMethods"> 调用父组件方法 </button>
  </div>
</template>

<script>
export default {
  inject: ['testVal','testMethods'],
  computed:{
    getValTest(){
      return this.testVal()
    }
  }
}
</script>

方法二、实现响应式传值方法：把需要传递的参数定义成一个对象

父组件

<template>
  <div>
    <label>父组件输入框：</label>
    <input v-model="testVal2F.test" />
    <button @click="saveTest">保存</button>
    <br>
    <br>
    <!-- 子组件 -->
    <input-button />
  </div>
</template>

<script>
export default {
  provide() {
    return {
      testObject:this.testVal2F
    }
  },
  data(){
    return {
      testVal2F: {
        test:"测试object传值"
      }
    }
  },
  methods:{
    saveTest(){
      console.error("父组件--this.testVal2F--",this.testVal2F)
    }
  }
}
</script>

子组件

<template>
  <div>
    <button @click="testMethods"> 调用父组件方法testMethods </button>
    <p>子组件接收数据：{{ testObject.test }}{{ testObject }}</p>
    <label>子组件输入框：</label>
    <input v-model="testObject.test" />
    <button @click="saveTest">保存</button>
    <br>
    testVal {{ testVal() }}
    <br>
    <br>
    getValTest-- {{ getValTest }}
  </div>
</template>

<script>
export default {
  inject: ['testVal','testMethods','testObject'],
  computed:{
    getValTest(){
      return this.testVal()
    }
  },
  methods:{
    saveTest(){
      console.error("子组件--this.testObject--",this.testObject)
    }
  }
}
</script>