Vue3新特性的学习(八)——provide和inject组件通讯

1,267 阅读1分钟

持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第18天,点击查看活动详情

今天主要学的是provide和inject组件的通讯,以及响应式数据的判断。

provide和inject组件通讯

provideinject可以轻松实现跨层级组件通讯,provide在父组件中返回要传给下级的数据,inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。

示例: 新建一个子组件inject.vue

<template>
  <div>我是inject组件,{{acceptMessage}}</div> // 我是inject组件,你好
</template>
<script lang="ts">
import { defineComponent, inject } from "vue";
export default defineComponent({
  name: "inject",
  setup() {
    let acceptMessage = inject<any>("message");
    return {
        acceptMessage
    }
  },
});
</script>

在父组件中引入inject:

<template>
  <div>
    <inject-component></inject-component>
  </div>
</template>
<script lang="ts">
import { defineComponent, provide } from "vue";
import InjectComponent from "@/components/inject.vue";

export default defineComponent({
  name: "provide",
  components: {
    InjectComponent,
  },
  setup() {
    let text = "你好";
    provide("message", text);
  },
});
</script>

这时候在子组件那里就接收到父组件传过来的值。

同样,孙辈组件也是可以接受到父组件穿过来的值的,定义一个孙辈组件,在子组件中引入即可:

// grannson.vue
<template>
  <div>我是grandson组件, {{ acceptMessage }}</div>
</template>
<script lang="ts">
import { defineComponent, inject } from "vue";
export default defineComponent({
  name: "grandson",
  setup() {
    let acceptMessage = inject<any>("message");
    return {
      acceptMessage,
    };
  },
});
</script>

在子组件中引入:

import grandsonComponent from "@/components/grandson.vue";

<grandson-component></grandson-component>

在项目页面中就能看到,message都被传进来了。 image.png

响应式数据的判断

如果要检查一个数据是否为响应式数据可以通过isRef、isReactive、 isReadonly、isProxy方法来实现,先看一下这些方法的文字说明:

  1. isRef——检查一个值是否为一个ref对象
  2. isReactive——检查一个对象是否是由reactive创建的响应式代理
  3. isReadonly——检查一个对象是否有readonly创建的只读代理
  4. isProcy——检查一个对象是否由reactive或者readonly方法创建的代理 使用方法
<script lang="ts">
import {
  defineComponent,
  isRef,
  ref,
  isReactive,
  reactive,
  isReadonly,
  readonly,
  isProxy,
} from "vue";
export default defineComponent({
  name: "Home",
  setup() {
    console.log(isRef(ref(""))); // true
    console.log(isRef(reactive({}))); // true
    console.log(isReadonly(readonly({}))); // true
    console.log(isProxy(reactive({}))); // true
    console.log(isProxy(ref(""))); // true
  },
});
</script>

接下来继续学习Vue3的知识点~