适用于祖先和后代关系的组件间的通信，祖先元素通过 provide 提供一个值，后代元素则通过 inject 获取到这个值。这个值默认是非响应的，如果是对象那么则是响应式的：
export default { name: 'home', provide () { return { colored: this.colored // 依赖于 data } }, components: { MyComp }, data () { return { colored: { // 必须为对象 value: false }, msgs: [{ // ...
首先通过 provide 对外提供一个 colored，这个属性依赖于 data 中的 colored，该变量必须为一个对象，才是响应式的。
⚠️ 必须为一个对象
methods: { handleChangeColor () { this.colored.value = !this.colored.value } }
祖先组件监听事件或其他途径去修改 data 改变状态。
export default { name: 'MyComp', inject: ['colored'], // inject colored computed: { color () { return this.colored.value ? 'red' : 'black' // do more... } }, // ...
后代组件通过 inject 获取到祖先组件提供的对象，根据对象做进一步动作。
$root 直接访问根组件
根据官方的文档，我们可以通过 $root 来直接访问到 Vue 实例
比方说将数据存储在 Vue 实例中：
// src/main.js new Vue({ data () { return { // 在这里！！ colored: false } }, router, store, render: h => h(App) }).$mount('#app')
然后我们在其他各个组件中都能够使用：
export default { name: 'MyComp', // ... mounted () { console.log(this.$root) // 直接访问到根组件 }, // ... }
