Vue2中使用provide/inject时实现响应式数据

需求背景

在vue2的项目中祖孙组件之间通讯使用provide/inject来实现，是个很好的选择，而按照常规的写法，provide提供给孙级组件的数据会丢失响应性，这时我们就需要特殊的方法，确保在使用provide/inject同时，还能实现响应式数据。

实现方法

具体来说，实现provide/inject传递响应式数据的方法有多种

方法一：使用函数返回数据

• 父级组件

// 父级组件
export default {
  name: "Parent",
  data() {
    return {
      msgToChildren: 'This is a msg from parent'
    }
  },
  mounted() {
    const vm = this
    let i = 1
    setInterval(() => {
      vm.msgToChildren = `This is a msg from parent: ${i} times!`
      i++
    }, 1000)
  },
  provide () {
    const vm = this
    return {
      getMsg () {
        return vm.msgToChildren
      }
    }
  }
}

• 子级组件

<template>
  <div>Message from parent: {{ msgFromParent}}</div>
</template>
<script>
export default {
  name: "Parent",
  inject: ['getMsg'],
  data() {
    return {
      msgFromParent: this.getMsg()
    }
  }
}
</script>

方法二：使用对象传递要provide的数据

其原理在于provide的对象，其子属性是具有响应性的

• 父级组件

export default {
  name: "Parent",
  data() {
    return {
      sharingConfig: {
        title: 'This is a title sharing to children'
      }
    }
  },
  mounted() {
    const vm = this
    let i = 1
    setInterval(() => {
      vm.sharingConfig.title = `This is a title sharing to children: ${i} times!`
      i++
    }, 1000)
  },
  provide () {
    const vm = this
    return {
      sharingConfig: vm.sharingConfig
    }
  }
}

• 子级组件

<template>
  <div>Sharing title from parent: {{ sharingConfig.title }}</div>
</template>
<script>
export default {
  name: "Parent",
  inject: ['sharingConfig']
}
</script>

任选一种方法，就可以在使用provide/inject的同时，实现响应式数据传递！