本文介绍: 【代码】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>
原文地址:https://blog.csdn.net/xinbaiyu/article/details/134654174
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.7code.cn/show_792.html
如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
