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

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>

参考 | References

优快云 - Vue3-子组件调用父组件的方法、父组件给子组件传值，defineEmits、defineProps