首页 前端知识 Vue3组件传参之父子组件传参

Vue3组件传参之父子组件传参

2024-06-08 09:06:52 前端知识 前端哥 264 222 我要收藏

在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中获取,否则获取不到

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11409.html
标签
评论
发布的文章

echarts柱状图自动轮播

2024-06-16 01:06:46

Echarts--markPoint属性

2024-06-16 01:06:45

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!