vue3中父子间的通信（双向绑定传递的参数）

一、.常用的父子通信

（1）父传子

父组件fatherPage.vue传递数据

<!-- 父组件father.vue -->
<template>
    <div>
        <div>我是父组件fatherPage</div>
        <ChildPage :dialogHct="dialogHctVisible"></ChildPage>
    </div>
</template>
<script setup>
import ChildPage from "./components/ChildPage.vue";
import {ref} from 'vue';

const dialogHctVisible = ref(true)
</script>

子组件childPage.vue接收数据

<template>
    <div>我是子组件ChildPage</div>
</template>

import {defineProps,onMounted,ref} from 'vue';

const props = defineProps({
    dialogHct:  Boolean,
});

const params = ref("") // 用于接收参数

onMounted(()=>{
    console.log("props",props); // 输出父组件传递过来的所有数据
    params.value = props.dialogHct; // 接收参数
})

（2）子传父

子组件childPage.vue传递数据

<template>
<el-dialog v-model="dialogHct" title="子组件弹框" @close="handleCloses">
    <div>我是子组件ChildPage</div>
</el-dialog>
</template>

const emit = defineEmits(['handleCloses'])
cosnt text = ref("子传父")

function handleCloses() { // 子传父
    emit("handleCloses",text.value)
}

父组件fatherPage.vue接收数据

<!-- 父组件father.vue -->
<template>
    <div>
        <div>我是父组件fatherPage</div>
        <ChildPage @handleClose="handleParams"></ChildPage>
    </div>
</template>
<script setup>
import ChildPage from "./components/ChildPage.vue";
import {ref} from 'vue';

const dialogHctVisible = ref(true)
function handleParams(params){ // 参数就是子组件传递过来的数据
    dialogHctVisible.value = params;
}
</script>

二、.简化的父子通信（双向绑定传递的参数）

（1）父组件fatherPage.vue传递数据

<!-- 父组件father.vue -->
<template>
    <div>
        <div>我是父组件fatherPage</div>
        <ChildPage v-model:dialogHct="dialogHctVisible"></ChildPage>
    </div>
</template>
<script setup>
import ChildPage from "./components/ChildPage.vue";
import {ref} from 'vue';

const dialogHctVisible = ref(true)
</script>

（2）子组件childPage.vue接收数据

<template>
<el-dialog v-model="dialogHct" title="子组件弹框" @close="handleCloses">
    <div>我是子组件ChildPage</div>
</el-dialog>
</template>

import {defineProps,toRefs,defineEmits,onMounted,ref} from 'vue';

const props = defineProps({
    dialogHct:  Boolean,
});
let { dialogHct } = toRefs(props); // 如果需要改变dialogHct，就不能使用const
const emit = defineEmits(['update:dialogHct'])
const params = ref("") // 用于接收参数

onMounted(()=>{
    console.log("props",props); // 输出父组件传递过来的所有数据
    // 两种接收参数的方式
    params.value = props.dialogHct; // 第一种：使用'props.'点出对应的属性来接收传递过来的参数
    params.value = dialogHct; // 第二种：使用toRefs(props)将props结构成普通对象来接收传递过来的参数
    // 第一种如果对props.dialogHct重新赋值页面是能响应变化的,但是不够简化;
    // 第二种够简化,但是如果对dialogHct重新赋值页面是不会跟其响应变化的;
    // 所以我们一般都是使用toRefs()将props解构出来,再重新赋值到新的变量(params)就既能简洁又能响应
})

function handleCloses() { // 子传父
    props.dialogHct = false;
    emit("update:dialogHct",false); // 只要执行了该方法，父组件绑定变量（dialogHctVisible）就会赋值为false
}

（3）说明

1.如果有多个数据需要传递到子组件，那么只需要在子标签上多添加一个v-modle

<DialogHctTable v-model:dialogHct="dialogHctVisible" v-model:dialogHct2="dialogHctVisible2"></DialogHctTable>

2.因为是使用 v-model:dialogHct="dialogHctVisible"，双向绑定了dialogHctVisible变量，所以在子组件中只要是emit("update:dialogHct",传递的数据)就会将传递的数据赋值给dialogHctVisible，无需使用事件来触发