Vue3，父组件子组件传值，provide(提供)和inject(注入)传值
父组件向子组件传值
父子组件传递数据时，通常使用的是props和emit，父向子传递使用props，子向父传递使用emit。
子组件接收3种方式
// 1、简单接收
props:["title","isShow"],
// 2、接收的同时对数据类型进行限制
props:{
title:String,
isShow:Boolean
},
// 3、最完整接收写法
props: {
title: {
type: String,
default: "",
},
isShow: {
type: Boolean,
default: false,
},
},代码案例
父组件：demo04Manage.vue
<template>
<div id="demo04">
<h1>{{ name }}</h1>
<Child :title="data.title" :isShow="data.isShow"></Child>
</div>
</template>
<script>
import { ref, reactive } from "vue";
import Child from "./childComponent.vue";
//
export default {
name: "demo04",
components: {
Child: Child,
},
setup(props, context) {
// 名称
let name = ref("父组件.Demo04");
// 等价与const isShow = ref(true)
let data = reactive({
title: "Demo4测试案例",
isShow: true,
});
// return出去
return {
name,
data,
};
},
};
</script>子组件：childComponent.vue
<template>
<div id="demo04Child">
<h3>{{ name }}</h3>
<div class="menu">{{ title }}================={{ isShow }}</div>
</div>
</template>
<script>
import { ref, reactive } from "vue";
//
export default {
// 1、简单接收
// props:["title","isShow"],
// 2、接收的同时对数据类型进行限制
// props:{
// title:String,
// isShow:Boolean
// },
// 3、最完整接收写法
props: {
title: {
type: String,
default: "",
},
isShow: {
type: Boolean,
default: false,
},
},
setup(props, context) {
//
let name = ref("子组件.Demo04");
//
let data = reactive({
//
});
// return出去
return {
name,
data,
};
},
};
</script>
provide（提供）和inject（注入）传值
父传子时，使用的是props，如果父组件传子子组件时，先传给子组件，子组件再传给子子组件，如果多个子组件或多个子子组件使用时，就需要传很多次。像这种情况，可以使用provide()和inject()解决，不论组件嵌套多深，父组件都可以为所有子组件或子子组件提供数据，父组件使用provide()提供数据，子组件或子子组件inject()注入数据，同时兄弟组件之间传值更方便。
Composition API（组合式API）中使用：provide/inject，两个只能在setup期间调用，使用之前，必须从vue显示导入provide/inject方法。
Provide()
在setup中使用provide时，首先从vue显式导入provide 方法（import provide from ‘vue’），这个方法有两个属性 { name, value }。
Inject()
在setup函数中使用inject函数也需要显示的导入（import { inject } from ‘vue’）,它也接受两个参数 { name, ‘默认值’(可选) };
代码案例
父组件：demo05Manage.vue
<template>
<div id="demo05">
<h1>{{ name }}</h1>
<Child :title="title" :isShow="isShow"></Child>
</div>
</template>
<script>
import { ref, reactive, provide, readonly } from "vue";
import Child from "./childComponent.vue";
//
export default {
name: "demo05",
components: {
Child: Child,
},
setup(props, context) {
// 名称
let name = ref("父组件.Demo05");
//
provide("title", "Demo5测试案例");
provide("isShow", readonly(true));
// return出去
return {
name,
};
},
};
</script>子组件：childComponent.vue
<template>
<div id="demo05Child">
<h3>{{ name }}</h3>
<div class="menu">{{ title }}================={{ isShow }}</div>
</div>
</template>
<script>
import { ref, reactive, inject } from "vue";
//
export default {
// 1、简单接收
// props:["title","isShow"],
// 2、接收的同时对数据类型进行限制
// props:{
// title:String,
// isShow:Boolean
// },
// 3、最完整接收写法
props: {
title: {
type: String,
default: "",
},
isShow: {
type: Boolean,
default: false,
},
},
setup(props, context) {
let name = ref("子组件.Demo05");
//
const title = inject("title");
const isShow = inject("isShow");
// return出去
return {
name,
title,
isShow,
};
},
};
</script>