持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第18天,点击查看活动详情。
今天主要学的是provide和inject组件的通讯,以及响应式数据的判断。
provide和inject组件通讯
provide
和inject
可以轻松实现跨层级组件通讯,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
都被传进来了。
响应式数据的判断
如果要检查一个数据是否为响应式数据可以通过isRef、isReactive、 isReadonly、isProxy
方法来实现,先看一下这些方法的文字说明:
isRef
——检查一个值是否为一个ref对象isReactive
——检查一个对象是否是由reactive创建的响应式代理isReadonly
——检查一个对象是否有readonly创建的只读代理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的知识点~