Vue3之provide与inject
Vue3 Inject provide
2023-09-11 14:19:18 时间
简介
- 这两个api一般一起使用,官网上曾说,这与React的Context非常相似 点击
- 他们用于跨组件传递数据
provide
- 他有两个参数,name(必须是字符串)和vaule
inject
2. 他也有两个参数,name和默认值(可选)
例子
代码
父组件
<script setup>
import { provide, ref } from 'vue';
import Child from "./子组件.vue"
const color = ref("red")
provide("color", color)
const changeColor = (_color) => {
color.value = _color
}
</script>
<template>
<h2>父组件</h2>
<div>当前的颜色为{{ color }}</div>
<button @click="changeColor('blue')">蓝色</button>
<button @click="changeColor('yellow')">黄色</button>
<button @click="changeColor('green')">绿色</button>
<child></child>
</template>
子组件
<script setup>
import GrandSon from "./孙组件.vue"
</script>
<template>
<h2>子组件</h2>
<grand-son></grand-son>
</template>
孙组件
<script setup>
import { inject } from 'vue';
// 与eventBus是两码事
const color = inject("color")
</script>
<template>
<h2>孙组件</h2>
<div :style="{color:color}">看我的颜色</div>
</template>
效果
- 当我们点击相应的按钮的时候,我们会发现孙组件就会拿到相应的变量
相关文章
- vue3组合式Composition API之ref函数的具体用法
- Vue3快速上手资料!手把手带你彻底学会Vue3,超详细讲解!不怕学不会!【建议收藏】【尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通vue3笔记资料】
- vue3 - 关闭eslint提示参数必须定义类型
- vue3中 toRefs和 toRef 的区别
- 如何在vue3获取 DOM 元素
- vue3和react虚拟DOM的diff算法区别
- Vue3学习笔记(六)—— 作业
- vue3 ref 和reactive的区别
- vue3快速入门-Teleport传送(瞬移组件)
- Vue3带来了什么
- Vue3 组件定义与插槽
- Vue3+TypeScript+Element Plus前端项目构建入门
- vue3 watch 异步方法