vue组件通信—依赖注入provide和inject基础使用

本文主要是介绍vue组件通信—依赖注入provide和inject基础使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

• 场景：父组件的数据要共享给所有的子孙组件就可以使用provide和inject
• 注意点：父组件暴露的数据不是响应式的

<script>
import Son from './components/Son.vue'
export default {components: { Son },data(){return {money: 100}},// 1.如果父组件的数据要共享给所有的后代组件数据, 可以使用provide来暴露提供数据// 2. 子组件内部取这个暴露的数据 inject: ['数据名','xxx']// 3. 问题: 这个暴露的数据不是响应式的// 语法: 函数 必须return一个对象provide(){return {num: this.money}}
}
</script>

子组件

<template><div><h2>子组件son--{{num}}</h2><grand-son></grand-son></div>
</template><script>
import GrandSon from './GrandSon.vue'
export default {components: { GrandSon },// 接收父组件暴露提供的数据numinject: ['num']
}
</script><style></style>

这篇关于vue组件通信—依赖注入provide和inject基础使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---