这一章节我们来讲讲 provide 和 inject 的用法, 首先说一下它们有什么用, provide 的作用是 给后代组件传递数据, inject 的作用是 让后代组件接收provide中的数据, 当我们知道它们有什么作用后, 接下来就可以去看它们的写法了
概念
provide ：传递数据
inject：接收数据
然后，我再特别强调，这2个东西主要是让 祖先组件 向 后代组件 传递数据用的。
我们这里说的后代组件，不包括子组件！！！
如果你想给子组件传递数据，请直接使用props就可以了，而不是多此一举的用 provide/inject，虽然说它两也能用，但是这不科学
用法
祖先组件
比如我的祖先组件如下，要传递一个数据 person 给它的后代组件
<template>
<h2>我是祖先组件，我要传递的数据是 : {{name}}-{{sex}}-{{age}}</h2>
<!-- Children 是后代组件 -->
<Children />
</template>
<script>
import { provide } from 'vue';
import Children from './Children';
export default {
components: { Children }
setup() {
// 这是我要传递的数据
let person = {
name: '黄某人',
sex: '男',
age: 18
};
// 使用 provide 来传递person给后代组件
// provide的第一个参数是key，第二个参数是要传递的数据，后代组件需要通过key获取数据
provide('data', person);
return { ...person };
}
}
</script>
|
后代组件
我们的后代组件这么写
<template>
<h2>我是后代组件，我要接收到的数据是 : {{name}}-{{sex}}-{{age}}</h2>
</template>
<script>
import { inject } from 'vue';
export default {
setup() {
// 使用 inject 来接收provide中的数据
let data = inject('data');
return { ...data };
}
}
</script>
|
