vue中组件传值是比较常见的,也是我们日常编写代码最常用到的,这里主要讲讲provide和inject的用法。
示例:
祖组件
- <DemoOne>DemoOne>
-
- <script setup>
- import DemoOne from './DemoOne.vue'
- import { provide } from 'vue'
- provide('title','我DemoOne是里面的数据')
- script>
父组件
- <DemoTwo>DemoTwo>
-
- <script setup>
- import { provide } from 'vue'
- import DemoTwo from './DemoTwo.vue'
- provide('title','我是DemoTwo级组件的值')
- script>
子组件
- <div>我是子组件,我获取的内容是:{{title}}div>
-
- <script setup>
- import { ref,inject } from 'vue'
- const title= ref()
- content.value = inject('title')
- script>
****注:这里输出的结果是父组件的内容,当我们注释掉父组件传输的值时,他输出的则是祖组件的值,由此得出,同名称时,他会通过层级进行查找,这就是provide和inject的特殊用处
我是子组件,我获取的内容是 我是DemoTwo级组件的值