vue3如何通过provide和inject实现多层级组件通信
作者：Attacking-Coder
这篇文章主要介绍了vue3如何通过provide和inject实现多层级组件通信,本文通过实例代码给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue3通过provide和inject实现多层级组件通信
父组件
<template>
<div>
<h1>我是父组件 {{num}}</h1>
<hr>
<child></child>
</div>
</template>
<script setup>
import child from './child.vue';
import { ref,provide } from 'vue';
let num = ref(520)
provide('parentNum',num)
</script>子组件
<template>
<div>
<h2>我是子组件</h2>
<hr>
<grandchild></grandchild>
</div>
</template>
<script setup>
import grandchild from './grandchild.vue';
</script>孙子组件
<template>
<div>
<h3>我是孙子组件</h3>
<p>这是爷爷的值 {{parentNum}}</p>
<button @click="handler">点击我爷爷的值减100</button>
</div>
</template>
<script setup>
import { inject } from 'vue';
let parentNum = inject('parentNum')
const handler = () => {
parentNum.value -= 100
}
</script>
扩展：
vue3 provide 和 inject 的用法 实现跨层级的组件通信
1.父组件利用 provide 提供数据也就是传
<script setup>
import { provide, ref } from 'vue'
import son from './son.vue'
let msg = ref('xjj')
// 在父组件中将 msg 设置为依赖注入：能够在所有的后代组件中使用这些数据
provide('msg', msg)
</script>
<template>
<h2>05-组合式API - 依赖注入</h2>
<h3>父组件</h3>
<div>msg: {{ msg }}</div>
<son></son>
</template>
<style></style>2.子组件通过 inject (子孙后代, 都可以拿到这个数据)也就是收
<script setup>
import { inject } from 'vue'
import gson from './gson.vue'
let msg = inject('msg')
</script>
<template>
<h3>子组件</h3>
<div>msg: {{ msg }}</div>
<gson></gson>
</template>
<style></style>注意：为了给 provide/inject 添加响应式，使用 ref 或 reactive
到此这篇关于vue3通过provide和inject实现多层级组件通信的文章就介绍到这了,更多相关vue3多层级组件通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！