vue3通过provide和inject实现多层级组件通信

最新推荐文章于 2024-08-23 13:45:37 发布

Attacking-Coder

最新推荐文章于 2024-08-23 13:45:37 发布

阅读量557

点赞数 9

分类专栏： vue 面试文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xinbaiyu/article/details/134654174

版权

面试同时被 2 个专栏收录

71 篇文章 0 订阅

订阅专栏

vue

42 篇文章 0 订阅

订阅专栏

父组件

<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>