【Vue3】父子组件传值、方法调用

原创已于 2023-09-01 14:38:44 修改 · 785 阅读

0 ·

CC 4.0 BY-SA版权

本文为【tanpenggood】原创文章，允许转载，但转载必须注明出处并附带首发链接！

文章标签：

#vue.js #前端 #javascript

于 2023-09-01 14:37:06 首次发布

VUE系列专栏收录该内容

6 篇文章

订阅专栏

本文详述了Vue3中scriptsetup标签下的defineProps和defineEmits在组件间交互中的应用，包括定义和使用方法，以及其相对于传统导入方式的优势。

Talk is cheap, show me the code.

环境 | Environment

k	version
OS	windows 10
vue	3.2.47
javascript	ES5+

defineProps 和 defineEmits

defineProps 和 defineEmits 只能在<script setup>中使用的编译器宏。

它们不需要使用import导入，且会随着<script setup>的处理过程一同被编译掉。

在子组件中的基本使用方式如下：

<script setup>
const props = defineProps({
  msg: String
})

const emit = defineEmits(['load-data'])
</script>

子组件调用父组件的方法 defineEmit

父组件

<template>
	<div>
        <add-modal ref="addModal" @load-data="loadData" />
	</div>
</template>

<script setup>
function loadData() {
    // ...
}
</script>

子组件

<template>
    <div></div>
</template>

<script setup>
// 引入
const emit = defineEmits(['load-data'])

function handleClickSubmit() {
    validate().then(res => {
        addAPI(data).then(res => {
            if (res.success) {
                // 使用
                emit("load-data")
            }
        })
    }).catch(err => {
        console.error('error', err);
    });
}
</script>