vue3中provide和inject的使用
1.provide 和 inject 的讲解
provide和inject可以实现嵌套组件之间进行传递数据。
这两个函数都是在setup函数中使用的。
父级组件使用provide向下进行传递数据；
子级组件使用inject来获取上级组件传递过来的数据；
需要注意的是：
1==>provide只能够向下进行传递数据
2==>在使用provide和inject的时候需从vue中引入
2.provide 和 inject 的使用
我们将创建2个组件
儿子组件ErZi.vue
孙子组件SunZI.vue
我们将在父级组件中向其子代传递数据；
那么儿子、孙子组件都将会接受到；
并且在视图上显示出来
3.父组件
<template>
<erzi-com></erzi-com>
</template>
<script lang="ts">
import ErZi from "../components/ErZi.vue"
import {provide, ref} from "vue"
export default {
name:"About",
components:{
'erzi-com':ErZi
},
setup(){
let giveSunziData=ref({
with:100,
height:50,
bg:'pink'
})
// 第一个参数是是共享数据的名称(giveSunzi)
// 第二个参数是共享的数据(giveSunziData)
provide('giveSunzi',giveSunziData)
}
}
</script>
父组件向其子代组件传递了一个对象
provide是在setUp这个组合APi中使用的
provide的使用方式：
provide（'共享数据名称',共享值）
共享值可以是字符串、数字、对象、数组子组件在进行接收到的时候；
let xxx=inject('共享数据名称');
4.儿子组件
<template>
<div>
<h2>儿子组件</h2>
<div>得到的值：{{getFaytherData}}</div>
</div>
<hr/>
<sun-con></sun-con>
</template>
<script lang="ts">
import { defineComponent, inject } from 'vue';
import SunZI from "./SunZI.vue"
export default defineComponent({
name: 'ErZi',
components:{
'sun-con':SunZI
},
setup(){
let getFaytherData=inject('giveSunzi');
return { getFaytherData }
}
});
</script>
5.孙子组件
<template>
<div>
<h2>孙子组件</h2>
<div>得到的值{{getYeYeData}}</div>
</div>
</template>
<script lang="ts">
import { defineComponent,inject } from 'vue';
export default defineComponent({
setup(){
let getYeYeData=inject('giveSunzi');
return { getYeYeData }
}
});
</script>
6.效果图
7.父组件可以传递多个rovide吗？
有些时候，我们的父组件可能需要传递多个rovide;
因为我们想让数据分开。
此时就需要传递多个rovide。
经过实践，父组件是可以传递多个rovide的！！！！
这是没有没问题的；但是个人并不推荐这样处理
我们可以在传递的时候将多个数据进行一次组装；
组装好了之后再进行传递
8.rovide和inject的引用场景
当父组件有很多数据需要分发给其子代组件的时候，
就可以使用provide和inject。
到此这篇关于vue3中provide和inject的使用的文章就介绍到这了,更多相关vue provide和inject使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
Vue.js中provide/inject实现响应式数据更新的方法示例
vue.js官方文档:https://cn.vuejs.org/v2/api/#provide-inject 首先假设我们在祖辈时候传入进来是个动态的数据,官方不是说如果你传入了一个可监听的对象,那么其对象还是可响应的么? parent父页面: export default { provide() { return { foo: this.fonnB } }, data(){ return { fonnB: 'old word '} } created() { setTimeout(()=>{
-
详解Vue 多级组件透传新方法provide/inject
provide / inject 是 2.2 新增的方法,可以以一个祖先组件向所有子孙后代注入依赖(一个内容). provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量. Vue 官方警告: provide 和 inject 主要为高阶插件/组件库提供用例.并不推荐直接用于应用程序代码中. 当然,警告只是警告,你完全可以正常使用. 使用方法非常像 data 和 props 的组合大礼包: var Provider = {
-
vue中使用[provide/inject]实现页面reload的方法
在vue中实现页面刷新有不同的方法: 如:this.$router.go(0),location.reload()等,但是或多或少会存在问题,如页面会一闪等 所以建议使用[provide/inject]实现刷新 该方法t简单的来说就是在父组件中 1.设置provider 2.然后在子组件中通过inject调用 3.在需要执行的地方直接调用方法即可 总结 以上所述是小编给大家介绍的vue中使用[provide/inject]实现页面reload的方法,希望对大家有所帮助,如果大家有任何疑问请给我留
-
vue 解决provide和inject响应的问题
官网上说provide 和 inject 绑定并不是可响应的.这是刻意为之的.然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的. provide: Object | () => Object(一个对象或返回一个对象的函数) inject: Array | { [key: string]: string | Symbol | Object }(一个字符串数组,或一个对象,对象的 key 是本地的绑定名) 要实现父子组件响应,父组件传递的数据类型必须是对象Object,子组件接收的数
-
vue中的provide/inject的学习使用
前言 最近在看element-ui的源码,发现了一个这样的属性:inject.遂查看官网provider/inject provider/inject:简单的来说就是在父组件中通过provider来提供变量,然后在子组件中通过inject来注入变量. 需要注意的是这里不论子组件有多深,只要调用了inject那么就可以注入provider中的数据.而不是局限于只能从当前父组件的prop属性来获取数据. 下面我们来验证下猜想: first:定义一个parent component <template
-
vue3中provide和inject的使用
1.provide 和 inject 的讲解 provide和inject可以实现嵌套组件之间进行传递数据. 这两个函数都是在setup函数中使用的. 父级组件使用provide向下进行传递数据: 子级组件使用inject来获取上级组件传递过来的数据: 需要注意的是: 1==>provide只能够向下进行传递数据 2==>在使用provide和inject的时候需从vue中引入 2.provide 和 inject 的使用 我们将创建2个组件 儿子组件ErZi.vue 孙子组件SunZI.vu
-
vue3中 provide 和 inject 用法及原理
前言: 在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传很多次,会很麻烦. 像这种情况,可以使用 provide 和 inject 解决这种问题,不论组件嵌套多深,父组件都可以为所有子组件或孙组件提供数据,父组件使用 provide 提供数据,子组件或孙组件 inject 注入数据.同时兄弟组件之间传值更方便. 一.Vue2 的 provide
-
Vue3中Provide / Inject的实现原理分享
目录 前言 原型和原型链的知识回顾 使用 Provide provide API实现原理 组件实例对象初始化时provides属性的处理 使用 Inject inject API实现原理 provide/inject实现原理总结 拓展:Object.create原理 拓展:两个连续赋值的表达式 总结 前言 Vue3 的 Provide / Inject 的实现原理其实就是巧妙利用了原型和原型链来实现的,所以在了解Vue3 的 Provide / Inject 的实现原理之前,我们先复习一下原型和
-
vue2.0/3.0中provide和inject的用法示例
目录 1.provide/inject有什么用? 2.provide/inject使用方式 具体用法: vue3.0用法 总结 1.provide/inject有什么用? 常用的父子组件通信方式都是父组件绑定要传递给子组件的数据,子组件通过props属性接收,一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读性不高,不便后期维护. vue提供了provide和inject帮助我们解决多层次嵌套嵌套通信问题.在provide中指定要传递给子孙组件的数据,子孙组件通过inject注
-
Vue 中 provide和inject的使用
目录 前言 Vue中如何使用provide和inject 在 Vue 中使用注入访问父数据 前言 在Vue中我们可以很方便的通过父组件往子组件传递属性,Props是我们将数据传递到子组件的主要方式之一.例如,下面的代码,我们往子组件(PopularList )传递了属性 name,其值是Most Popular Posts.在PopularList中我们可以通过name访问数据. <PopularList name="Most Popular Posts" /> 但是有时子
-
Vue中provide、inject详解以及使用教程
目录 Vue中 常见的组件通信方式可分为三类 1. provide / inject 简介 2. provide / inject 使用方法 3. 总结 总结 传送门:Vue中 子组件向父组件传值 及 .sync 修饰符 详解 传送门:Vue中 状态管理器(vuex)详解及应用场景 传送门:Vue中 $ attrs.$ listeners 详解及使用 传送门:Vue中 事件总线(eventBus)详解及使用 传送门:Vue 2.x 官方文档 provide / inject 说明 Vue中 常见
-
vue3 provide与inject的使用小技巧分享
目录 vue3 provide与inject使用技巧 进入正题 父组件 child组件 son组件 vue3的一些实用技巧 v-for 和 v-if 不要一起使用(Vue2) vue3 provide与inject使用技巧 主要使用来沟通上下文,比如父——子——子1——子2,父组件和子2组件间的通信,不使用这方法也能解决的方式还有两种 props $emit 一层一层的传 弊端:写着太麻烦 vuex 用多了性能就不太行了 进入正题 官方文档上只提供了传递值的方式,没有提供子组件去跨级改父级组件的
-
聊聊Vue中provide/inject的应用详解
众所周知,在组件式开发中,最大的痛点就在于组件之间的通信.在 Vue 中,Vue 提供了各种各样的组件通信方式,从基础的 props/$emit 到用于兄弟组件通信的 EventBus,再到用于全局数据管理的 Vuex. 在这么多的组件通信方式中,provide/inject 显得十分阿卡林(毫无存在感).但是,其实 provide/inject 也有它们的用武之地.今天,我们就来聊聊 Vue 中 provide/inject 的应用. 何为 provide/inject provide/inj
-
vue中provide inject的响应式监听解决方案
目录 provide inject的响应式监听解决 vue监听赋值及provide与inject provide inject的响应式监听解决 提示:provide 和 inject 绑定并不是可响应的.这是刻意为之的.然而,如果你传入了一个可监听的对象,那么其对象的属性还是可响应的. 所以传值传对象即可 provide(){ return { provObj: { uuidList:{} } } }, this._provided.p
-
vue2 vue3中使用Echarts详细
目录 1.安装 2.vue2中使用Echarts 在main.js文件中 给定一个容器 3.vue3中使用Echarts 在根组件里引入echart,一般是App.vue 在需要使用的页面,定义div 然后在需要使用到Echarts的页面inject 1.安装 npm install echarts --save 2.vue2中使用Echarts 在main.js文件中 // 引入echarts import echarts from 'echarts' Vue.prototype.$echar