Vue3.0父子组件传值，事件触发

最新推荐文章于 2024-08-29 16:09:59 发布

Leon4055

最新推荐文章于 2024-08-29 16:09:59 发布

阅读量274

点赞数 1

分类专栏： vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41258075/article/details/131857098

版权

vue.js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这篇文章展示了在Vue.js中如何进行父子组件间的通信。父组件通过属性向子组件传递数据，子组件则通过定义自定义事件来向父组件发送信息。在示例中，父组件传递了一个标题属性，并监听子组件的‘change’事件，而子组件在点击时触发该事件并传递一个值给父组件。

摘要由CSDN通过智能技术生成

在这里插入图片描述

父级组件

<template>
    <div class="parent bg-green-500 p-5 text-3xl">
        <div>Parent - 这里是父元素</div>
        <!-- title 为子组件定义的属性, @change 是子组件定义的事件名称 -->
        <Children title="来自父元素Title" @change="parentEvent">content</Children>
    </div>
</template>

<script setup>
import Children from "./Children.vue";
// 父级组件事件定义
const parentEvent = (val) => {
    console.log("Parent Event");
    console.log(val);
};
</script>

<style scoped>
.parent {
    width: 500px;
}
</style>

子组件

<template>
    <div class="bg-blue-500 h-40 p-5">
        <!-- 子组件自定义事件名称 -->
        <div @click="childrenEvent">Children - {{ props.title }}</div>
        <slot></slot>
    </div>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";
// 属性定义接受父组件的传值
const props = defineProps({ title: String });
// 事件 名称自定义但父级调用事件需要使用这个名称@change
const emits = defineEmits(["change"]);
// 子组件自定义事件与父级无关可以自定义
const childrenEvent = () => {
    // 使用vue api 触发定义的事件
    emits("change", 1);
};
</script>

<style scoped></style>