Vue组件间通信方法总结(父子组件、兄弟组件及(2)

适用于祖先和后代关系的组件间的通信,祖先元素通过 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) // 直接访问到根组件 }, // ... }

Vue组件间通信方法总结(父子组件、兄弟组件及

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/9b03c7afe776902186f99a8775ec7440.html