VUE---父子组件间传值

父传子

1.需要两个组件

父组件: ValParent.vue
子组件: ValChild.vue

2.操作父组件

<template>
    <!-- 这里的 title1 title2 是子组件定义的在子组件中可以随便命名 父组件直接拿过来用 -->
	<ComValChild :title1="strValToChild1" :title2="strValToChild2" />
</template>

// 在子组件中要进行双向绑定所以使用 ref 定义变量
import { ref } from "vue";
// 引入子组件并命名
import ComValChild from "@/子组件路径";
// 定义一个变量用来存放要传的内容
// 这里为了方便理解 定义两个
let strValToChild1 = ref("此内容由父组件(ValParent.vue)传入子组件(ValChild.vue)");
let strValToChild2 = ref({ xiaodi: "我是华强派过来的,他问你这瓜保熟吗?" });

3.操作子组件

<template>
	<div> {{ jsonVal.title1 }} </div>
	<div> {{ jsonVal.title2.xiaodi }} </div>
</template>

// 这里有点类似于TypeScript需要声明数据类型 
// 一般只能有一个 defineProps(定义属性) 且不需要引入
const jsonVal = defineProps({
	title1: String, title2:Object
})

传值完成后子组件状态

子传父

子传父相对来说要难, 但难得不多

1.需要两个组件

父组件: ValParent.vue
子组件: ValChild.vue

2.操作子组件

<template>
	<input type="text" v-model="strVal" placeholder="此处内容将被发送到父组件">
	<button>发送到父组件</button>
</template>

// 这里要用到双向绑定 所以引入 ref
import { ref } from "vue";
// 定义变量存储传到父组件的内容
let strVal = ref();
// 定义要抛出的事件 使用 defineEmits(定义事件)
const emitFunc = defineEmits("outEventTest");
// 定义函数 抛出事件和值
function setValFuncEmit(){
// 此函数将 定义的事件和需要传入的值同时传入父组件
	emitFunc("outEventTest", strVal.value);
}

3.操作父组件[理解此处操作可为孙祖传值提供方便]

<template>
	<ComValChild @outEventTest="setValFuncReceive" /> <!-- outEventTest 是子组件定义的 事件  在此处可以直接使用 -->
	<div> {{ strValFromChild }} </div>
</template>

// 使用 ref 定义变量
import { ref } from "vue";
// 引入子组件并命名
import ComValChild from "@/子组件路径";
// 定义变量接收传过来的值
let strValFromChild = ref();     
// 定义函数 将传过来的值赋给变量
function setValFuncReceive(strVal){  // 此参数为子组件传入的值
	strValFromChild.value = strVal;  // 将值赋给变量 双向绑定至页面
}

现在 上方框子为子组件 下方为父组件

如下为效果 未点击按钮

点击按钮后 值被传入到父组件

祖父组件传值到子孙组件(从上传下)

1.需要用到两个及以上的组件(可以进行父子间传值)

1.祖辈/父辈 PassValGrandparent.vue
2.父辈/子辈 PlaceholderChild.vue
3.孙子辈 InputTextGrandchild.vue
父辈在此处仅表示跨辈份没有多大作用

2.操作祖组件/(父)

<template>
	<ComValChild /> 
</template>

// 使用 ref 定义变量 传值 provide 接收值 inject
import { ref, provide, inject } from "vue";
// 引入子组件并命名
import ComValChild from "@/子组件路径"; // 祖辈的下一级路径 不一定是要传值的路径(除非正好是父子)
// 定义变量 赋予要传的值
let strValToGrandchild = ref("此句由祖组件(PassValGrandparent.value)传入孙组件(inputTextGrandchild.vue)");
// 传值 provide
provide("strToGrandchild",strValToGrandchild);
// 这里就像本地存储一样 把值存给了 key (key:value) 
// 当使用时 直接拿 key 就可以得到 value

3.如果有父组件的话 操作父组件

仅仅是把起到链接作用

<template>
	<ComponentInputText />
</template>

import ComponentInputText from "@/孙组件路径";

4.操作孙组件/(子)

<template>
	<div>{{ strFromGrandparent }}</div>
</template>

// 使用 ref 定义变量 传值 provide 接收值 inject
import { ref, provide, inject } from "vue";
// 接收值 inject
const strFromGrandparent = inject("strToGrandchild");

孙子组件向祖组件传值(从下向上)

1.需要用到两个及以上的组件(可以进行父子间传值)

这里vue并没有提供这个功能,但是我们可以通过传函数的方式解决
1.祖辈/父辈 PassValGrandparent.vue
2.父辈/子辈 PlaceholderChild.vue
3.孙子辈 InputTextGrandchild.vue
父辈在此处仅表示跨辈份没有多大作用

2.操作祖组件

<template>
	<ComValChild /> 
	<div>{{ strValFromGrandchild  }}</div>
</template>

// 使用 ref 定义变量 传值 provide 接收值 inject
import { ref, provide, inject } from "vue";
// 引入子组件并命名
import ComValChild from "@/子组件路径"; // 祖辈的下一级路径 不一定是要传值的路径(除非正好是父子)
// 定义变量 赋予要传的值
let strValFromGrandchild = ref("");
// 定义函数改变值
function setValToitem(setValue){
	strValFromGrandchild.value = setValue;
}
// 传值 provide
provide("setToGrandchild",setValToitem); // 将带参函数传入

父组件脑部

3.操作孙组件

// 使用 ref 定义变量 传值 provide 接收值 inject
import { ref, provide, inject } from "vue";
// 接收值 inject
const FuncFromGrandparent = inject("setToGrandchild");  // 接收带参函数
FuncFromGrandparent("华强要捅人了");  // 调用带参函数 孙组件操作的值就是该参数(setValue);

至此组件传值完毕