一、.常用的父子通信
(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,无需使用事件来触发