Vue3中使用provide和inject传值（子传父）

ᥬ 小月亮

已于 2023-01-17 14:40:40 修改

阅读量1.1k

点赞数

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

于 2022-07-25 11:28:30 首次发布

本文链接：https://blog.csdn.net/Y1914960928/article/details/125934955

版权

vue 专栏收录该内容

27 篇文章 2 订阅

订阅专栏

要求：A组件中包含B组件，B组件中包含C组件，C组件中包含D组件，D组件要向A组件传值。

1、在A组件中添加如下代码：

<script lang="ts">
import {
  defineComponent,
  provide,
} from "vue";
export default defineComponent({
  name: "index",
  setup() {
    // 组件D向组件A传值，A组件中使用该方法接收
    const onChange = (value: boolean) => {
      console.log("D组件给A组件传的值是", value)
    };
    provide("onChangeArgee", onChange);
  },
});
</script>

2、在D组件中写入如下代码：

<script lang="ts">
import {
  defineComponent,
  inject,
} from "vue";

export default defineComponent({
  name: "D",
  setup() {
    const onChange = inject("onChangeArgee", Function, true); 
    // 在 组件D 中对数据进行操作的方法
    const onAgree = (value: boolean) => {
      // 传值
      onChange(value);
    };
  },
});
</script>