vue2父组件向子孙组件响应式传参，provide/inject响应式

provide和inject一起使用，实现将父组件的数据、方法提供给子孙组件使用，不论组件层次有多深。provide和inject绑定并不是可响应的。但如果你传入了一个可监听的对象，那么其对象的property还是可响应的。

API — Vue.js (vuejs.org)https://v2.cn.vuejs.org/v2/api/#provide-injectprovide/inject响应式传参

1、传入一个可监听的对象

父组件

<template>

</template>

<script>
export default {
  name: "Project",
  data() {
    return {
      // 要传的参数是可监听的对象
      record: {
        msg: '呵呵呵'
      }
    }
  },
  created() {
    setTimeout(()=> {
      this.record.msg = '8888'
    }, 2000)
  },
  // 向孙组件传参
  provide() {
    return {
      record: this.record
    }
  }
}
</script>

子组件

<template>
  
</template>

<script>
export default {
  name: 'ProjectQuoteList',
  // 祖先组件的参数
  inject: ['record'],
}
</script>

<style lang="scss" scoped>

</style>

 2、传入函数的方式传参

父组件

<template>

</template>

<script>
export default {
  name: "Project",
  data() {
    return {
      // 要传的参数是一个不可监听的对象(例如：后续赋值新的对象)
      record: {}
    }
  },
  created() {
    setTimeout(()=> {
      this.record = {...}
    }, 2000)
  },
  methods: {
    // 用于向孙组件响应式传参
    getRecord() {
      return this.record
    }
  },
  // 向孙组件传参
  provide() {
    return {
      getRecord: this.getRecord
    }
  }
}
</script>

<style lang="scss" scoped>


</style>

 子组件

<template>
  
</template>

<script>
export default {
  name: 'ProjectQuoteList',
  inject: ['getRecord'],
  computed: {
    // 祖先组件的参数
    record() {
      return this.getRecord()
    }
  },
}
</script>

<style lang="scss" scoped>

</style>

对象的更新不是响应的（官方说明）：