vue中provide和inject的使用

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

        vue中组件传值是比较常见的，也是我们日常编写代码最常用到的，这里主要讲讲provide和inject的用法。

示例：

祖组件

<template><DemoOne></DemoOne>
</template><script setup>import DemoOne from './DemoOne.vue'	import { provide } from 'vue'provide('title','我DemoOne是里面的数据')
</script>

父组件 

<template><DemoTwo></DemoTwo>
</template><script setup>import { provide } from 'vue'import DemoTwo from './DemoTwo.vue'provide('title','我是DemoTwo级组件的值')
</script>

 子组件

<template><div>我是子组件,我获取的内容是：{{title}}</div>
</template><script setup>import { ref,inject } from 'vue'const title= ref()content.value = inject('title')
</script>

 ****注：这里输出的结果是父组件的内容，当我们注释掉父组件传输的值时，他输出的则是祖组件的值，由此得出，同名称时，他会通过层级进行查找，这就是provide和inject的特殊用处

我是子组件,我获取的内容是 我是DemoTwo级组件的值

这篇关于vue中provide和inject的使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---