vue3中组件给后代组件传值，provide和inject的使用

如果只是父组件给子组件传值，我们一般用自定义属性加props接收就可以了，但是一个组件要给更深层的组件传值，一直用父传子的方式就感觉有点麻烦了。所以vue3可以使用provide来传值、用inject来接收值的方式处理这样的问题会更加方便一点。接下来我用setup()组合式API的来实现，废话不多说直接上代码...

根组件代码

<script>
import { provide } from 'vue'
export default {setup(){provide('name','xiaoming')}
</script>

后代组件

<script>
import { inject } from 'vue'
export default {setup(){let myName= inject('name')console.log(myName)  //xiaoming}
}
</script>

vue3中组件给后代组件传值，provide和inject的使用相关推荐

vue组件深度传值provide、inject,值类型响应式的方法
文章目录前言一.provide,inject是什么? 二.使用步骤 1.祖先组件provide注入,并且传入的是整个this指向 2.后代组件接收总结前言最近封装了一个上传,下载,查看附件的 ...
解决vue3中echarts的tooltip组件不显示的问题
data() {return {chartInstance: ''} },mounted() {if(!this.chartInstance) this.chartInstance = echarts ...
vue3 中使用antd UI组件
之前搞pc端的会使用element的ui组件现在 vue3 来了顺便也更新试用下 vuu3中的ui组件不过好像 element还没更新支持 vue3 所以先用antd 来试试看 1. ...
vue3组件通信的方式父传子 props 和子传父 $emit 非父子组件的通信Provide和Inject 全局事件总线mitt库
vue3组件通信的方式一.父传子 props 和子传父 $emit 1.父传子 props 在开发中最常见的就是父子组件之间通信,父组件往子组件通信使用的是props.子组件往父组件通信则使用的是 ...
vue3中的provide和inject
在vue2中我们已经使用过provide和inject来实现祖孙组件之间的数据传递,但是在vue3中由于我们使用setup,此时我们应该如何去使用provide和inject函数呢? 在vue中帮我们 ...
如何优雅的在 vue 中使用非响应式对象_一篇文章上手Vue3中新增的API
1. 初始化项目 // ① npm i -g @vue/cli // ② vue create my-project // ③ npm install @vue/composition-api -S/ ...
Vue3中的setup前加上async后页面不显示
问题: Vue3项目中,在setup函数前加上了async,使其变成异步函数,导致页面空白不显示? 描述: 最近在学习Vue3项目,使用了CompositionAPI的书写方式,其中有一个setup函 ...
Vue 3的provide和inject用法
了解Vue 3的provide和inject用法前言在组合式API中的用法基本用法前言 provide和inject在Vue 2中已经被广泛应用,不是新鲜API,3.0重新认识一下它们两个. ...
vue3中的组件间通信
Vue3.0组件通信父给子传值 props $attrs给子组件传值 $parent provide / inject 子组件向父组件传递 emit 父给子传值 props 我们通过在父组件引用子组 ...

vue3中组件给后代组件传值，provide和inject的使用

vue3中组件给后代组件传值，provide和inject的使用相关推荐

最新文章

热门文章