vue基础（一）父子组件通信

最新推荐文章于 2024-09-13 14:34:15 发布

Leonardo-

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量239

点赞数 2

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

本文链接：https://blog.csdn.net/m0_50638313/article/details/142061683

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.父组件传值子组件

使用defineProps()

2.子组件传递给父组件事件

defineEmits()

子组件中

<template>
    <div>
        <div @click="handleEvent('childrenClick')">
            the message is
        </div>     
    </div>
</template>

<script setup>
const emit = defineEmits(['childrenClick'])

const handleEvent = (fname) => {
    emit(fname, 'hello,world')
}
</script>

父组件中

<template>
    <div>
        <div @childrenClick="handleClick">
            parent
        </div>     
    </div>
</template>
<script setup>
const handleClick = (data) => {
    console.log("parent"+data)
}
</script>