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

一、.常用的父子通信

（1）父传子

父组件fatherPage.vue传递数据

子组件childPage.vue接收数据

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传递数据

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

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

父组件fatherPage.vue接收数据

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

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

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

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

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