Vue3 父子传值

父子传值

1、父传子：父组件绑定一个数据，子组件通过defineProps接收

父组件：父组件中通过绑定数据传给子组件

<template>
    <div>
        <table border cellspacing="0" style="width: 800px; border-collapse: collapse">
        	<!-- 父组件中通过绑定数据传给子组件 -->
            <Theader :headerList="hList.title" />
            <Tbody ref="tbody" :list="list" :total="$total" @del="del" />
        </table>
    </div>
</template>

子组件：子组件通过defineProps来接收，无需引入直接使用

<script setup lang="ts">
type Props = {
    headerList?: string[];
};
// 子组件通过defineProps来接收，无需引入直接使用
//defineProps<Props>()

// ts定义接收参数默认值
withDefaults(defineProps<Props>(), {
    // 不能直接这样赋值
    // headerList: ['str', '12str', 'str', 'str'],
    headerList: () => ['str', '12str', 'str', 'str'],
});
</script>

2、子传父

父组件：绑定自定义事件传递给子组件

<template>
    <div>
        <table border cellspacing="0" style="width: 800px; border-collapse: collapse">
            <Theader :headerList="hList.title" />
            <!-- 父组件中绑定自定义事件传递给子组件 -->
            <Tbody ref="tbody" :list="list" :total="$total" @del="del" />
        </table>
    </div>
</template>

子组件：通过defineEmits 注册了一个自定义事件，触发emit去调用注册的事件，然后传参

<script setup lang="ts">
//const emit = defineEmits(['自定义事件名称']);返回一个函数
const emit = defineEmits(['del']);
const handleDel = (index: number) => {
	// emit('自定义事件名称', 参数);
    emit('del', index);
};
</script>

3、父组件通过ref去获取子组件中的内部属性

父组件：通过ref获取子组件实例

<template>
    <div>
        <table border cellspacing="0" style="width: 800px; border-collapse: collapse">
            <Theader :headerList="hList.title" />
            <!-- 父组件中通过ref获取子组件实例 -->
            <Tbody ref="tbody" :list="list" :total="$total" @del="del" />
        </table>
    </div>
</template>

子组件：

// 父组件若想通过ref获取子组件中定义的属性，或者一些方法要通过defineExpose
const list = reactive({
    name: 'string',
});
defineExpose({
    list,
});