在Vue3中,父子组件之间的通信是一项常见的任务。本文将介绍一些在Vue3中实现父子组件之间传值的方法。
一、Props(父组件向子组件传参)
在Vue3中,可以使用props来在父组件向子组件传递数据。在父组件中,可以通过在子组件上使用v-bind指令,将数据绑定到子组件的defineProps
方法上。子组件可以直接通过defineProps里的属性访问到传递过来的数据。
// ParentComponent.vue
<template>
<div>
<ChildComponent :arrList="arrList" :message="message" />
</div>
</template>
<script setup lang="ts">
import ChildComponent from "../ChildComponent/ChildComponent.vue";
import { ref, reactive } from "vue";
const message = ref<string>("Hello from parent component!");
const arrList = reactive([1, 2, 3]);
</script>
// ChildComponent.vue
<template>
<div>
{{ message }}
{{ arrList }}
</div>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
interface Iprops {
message?: string;
arrList?: number[];
}
const props = withDefaults(defineProps<Iprops>(), {
arrList: [888],
});
console.log(props.message);
</script>
<style scoped></style>
在上面的例子中,父组件通过props将名为message的数据传递给子组件,并在子组件中显示。在子组件中,可以使用 withDefaults
的第二个参数来定义默认值
二、defineEmits 子组件向父组件传参
除了父组件向子组件传递数据,子组件也可以向父组件传递数据。Vue3中可以使用defineEmits方法来触发自定义事件,并将数据作为参数传递给父组件。
// ParentComponent.vue
<template>
<div>
<ChildComponent @send-message="sendMessage" />
</div>
</template>
<script setup lang="ts">
import ChildComponent from "../ChildComponent/ChildComponent.vue";
const sendMessage= (val) => {
console.log(val); //Hello from child component!
};
</script>
// ChildComponent.vue
<template>
<div @click="handleClick">向父组件传参</div>
</template>
<script setup lang="ts">
const $emit = defineEmits<{
(e: "send-message", data: any): void;
}>();
const handleClick = () => {
$emit("send-message", "Hello from child component!");
};
</script>
在上面的例子中,子组件通过点击按钮触发handleClick 方法,并使用$emit方法传递一个名为send-message的自定义事件,同时传递了一个字符串作为参数。父组件通过监听该自定义事件,获取到子组件传过来的值
三、defineExpose 父组件直接获取子组件的值
// ParentComponent.vue
<template>
<div>
<ChildComponent ref="refChild" />
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import ChildComponent from "../ChildComponent/ChildComponent.vue";
const refChild = ref<InstanceType<typeof ChildComponent>>(null);
onMounted(() => {
console.log(refChild.value.msg); // 子组件的数据
});
</script>
<style scoped></style>
// ChildComponent.vue
<template>
<div>向父组件传参</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
defineExpose({
msg: "子组件的数据",
});
</script>
<style scoped></style>
在上面的例子中,子组件通过defineExpose方法暴露出自己的参数,父组件通过ref方式进行获取。指的注意的是,获取子组件数据需要在onMounted
中获取,否则获取不到