vue3 provide 与 inject 用法
1 说明:
provide 可以在祖先组件中指定我们想要提供给后代组件的数据或方法,而在任何后代组件中,我们可以使用inject来接收provide提供的数据和方法。
2 用法:
父亲组件
<template>
<div>
<h1>父亲组件级别</h1>
<label>
<input v-model="colorVal" value="pink" name="color" type="radio">
粉色
</label>
<label>
<input v-model="colorVal" value="yellow" name="color" type="radio">
黄色
</label>
<div class="box"></div>
<hr/>
<provideAVue></provideAVue>
</div>
</template>
<script setup lang='ts'>
import{ref,reactive, provide, readonly} from 'vue'
import provideAVue from './provideA.vue'
const colorVal = ref<string>('red');
//不允许子组件修改父组件的值--readonly
//provide('color', readonly(colorVal))
provide('color', colorVal)
</script>
<style scoped>
.box{
width: 50px;
height: 50px;
border: 1px solid #ccc;
/**
vue3 特有功能
*/
background: v-bind(colorVal);
}
</style>
孩子组件:provideA.vue
<template>
<div>
<h1>孩子级别组件</h1>
<div>
<button @click="change">修改provide值 yellow</button>
</div>
<div class="box"></div>
<hr />
</div>
</template>
<script setup lang='ts'>
import{ref,Ref,reactive, inject} from 'vue'
//添加默认值--第一种方法
// const color = inject<Ref<string>>('color',ref('red'));
// const change =()=>{
// color.value = 'yellow';
// }
//第二种方法
const color = inject<Ref<string>>('color');
const change =()=>{
// 非空断言
color!.value = 'yellow';
}
</script>
<style scoped>
.box{
width: 50px;
height: 50px;
border: 1px solid #ccc;
/**
vue3 特有功能
*/
background: v-bind(color);
}
</style>
vue3 provide 与 inject 用法相关推荐
- Vue 3的provide和inject用法
了解Vue 3的provide和inject用法 前言 在组合式API中的用法 基本用法 前言 provide和inject在Vue 2中已经被广泛应用,不是新鲜API,3.0重新认识一下它们两个. ...
- vue3中 provide 和 inject 用法
前言: 在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时, ...
- VUE2中provide 和 inject用法,以及怎么做响应式数据?
1. provide/inject说明 provide 和 inject, 用来实现实现跨组件之间通信. 父子/孙子组件之间任意通信. 在祖先组件中通过provide注入一个依赖,不论组件层次有多深, ...
- vue 中provide的用法_[转]浅谈vue中provide和inject 用法
provide:Object | () => Object inject:Array | { [key: string]: string | Symbol | Object } provide ...
- vue 3 学习笔记 (八)——provide 和 inject 用法及原理
在父子组件传递数据时,通常使用的是 props 和 emit,父传子时,使用的是 props,如果是父组件传孙组件时,就需要先传给子组件,子组件再传给孙组件,如果多个子组件或多个孙组件使用时,就需要传 ...
- vue 中provide的用法_浅谈vue中provide和inject 用法
一.概念解析 成对出现:provide和inject是成对出现的 作用:用于父组件向子孙组件传递数据 使用方法:provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或 ...
- vue中provide和inject 用法
我们平时在开发的时候,最常用的父子组件通信方式就是父组件绑定要传递给子组件的数据,然后子组件通过props属性接收.但是一旦组件层级变多时,采用这种方式一级一级传递值非常麻烦,而且代码可读性不高,不便 ...
- provide和inject 用法
这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的斜体样式时间里始终生效. 使用场景:由于vue有$parent属性可以让子组件访问父组件 ...
- vue 中provide的用法_vue 中的 provide 和 inject 用法
provider/inject:简单来说就是在父组件 provide 中提供变量,子组件 inject 中来注入,然后可以在子组件内部使用 provide 的变量 需要注意的是这里不论子组件有多深,只 ...
最新文章
- 在PHP当中制作隔行换色的效果以及制作上下翻页的效果!
- vue elementUI表单输入时触发事件@input
- Ubuntu登录后黑屏,或者桌面图标消失不见
- 网络服务器开发总结(转:http://my.oschina.net/u/181613/blog/596022)
- SIGIR2020 | 淘宝提出结合知识图谱与大规模推荐的新框架ATBRG
- python 持续集成_使用jenkins和Gitlab进行Python项目的持续集成
- 关于在Winphone中使用Google Map的问题(徐林峰)
- c++实现 :n进制两数相加模板
- 勒索软件Locky最新传播载体分析——中文版Office危在旦夕
- mkdir用大括号同时建立多个同级和下级目录
- 一个关于Schema的问题,请求帮助
- 超过千字的文章,才统计勤写标兵
- POJ训练计划3096_Surprising Strings(STL/map)
- 设计模式-责任链设计
- 【python实战】23个爬虫项目源码:微信、淘宝、知乎、微博...
- 串口_波特率计算字节
- win10支持8t 硬盘_教你如何解决win10系统识别不了移动硬盘?
- C语言之i++,++i,i--,--i
- linux--redis(redis在lnmp中做加速器2)
- 庄家猎杀散户的七大骗术