Vue 2.7 Provide/Inject 响应式监听: 父子组件数据共享

Vue 2.7 引入了新的特性：provide/inject 响应式监听，可以让我们更方便地在父组件和子组件之间共享数据。

provide/inject 是一对 API，用于向下传递数据。它们的使用方式如下：

父组件：

export default {
  provide() {
    return {
      message: 'Hello World'
    }
  }
}

子组件：

export default {
  inject: ['message'],
  mounted() {
    console.log(this.message) // 'Hello World'
  }
}

在父组件中，我们使用 provide 选项来提供数据。值得注意的是，provide 返回的是一个对象，对象的属性名就是我们要共享的数据的名字，属性值是数据本身。

在子组件中，我们使用 inject 选项来注入数据。inject 选项是一个数组，数组元素是我们要注入的数据的名字。我们可以在子组件中使用 this.message 来访问父组件提供的数据。

使用 provide/inject 的一大优势是，它们提供了响应式监听的功能，这意味着当父组件提供的数据发生变化时，子组件中的数据也会跟着变化。例如：

父组件：

export default {
  data() {
    return {
      message: 'Hello World'
    }
  },
  provide() {
    return {
      message: this.message
    }
  },
  mounted() {
    setInterval(() => {
      this.message = 'Hello Vue'
    }, 1000)
  }
}

子组件：

export default {
  inject: ['message'],
  mounted() {
    setInterval(() => {
      console.log(this.message) // 'Hello Vue'
    }, 1000)
  }
}

在父组件中，我们使用 setInterval 每秒钟修改一次 message 的值，从 'Hello World' 变成 'Hello Vue'。在子组件中，我们使用 setInterval 每秒钟打印一次 message 的值。可以看到，当 message 的值发生变化时，子组件中的 message 也会跟着变化。

总结一下，使用 provide/inject 可以让我们更方便地在父组件和子组件之间共享数据，并且提供了响应式监听的功能，使得数据的变化可以自动更新到子组件中。