父子通信

父传子

可通过属性 validator 验证传入的参数类型，通过抛出错误防止用户用错

<!-- 父组件传递属性 msg -->
<template>
    <h1>我是 Home 页面</h1>
    <router-view msg="home传递来的msg"></router-view>
</template>

<!-- 子组件接受 -->
<template>
    <h1>我是 Login 组件</h1>
    <router-link to="/">回到首页</router-link>
    <div>{{ msg }}</div>
</template>
<script setup>
import { defineProps } from 'vue'
defineProps({
    msg:{required: true,type: String},
    mode: {
        required: true,
        type: String,
        validator: (value) => {
            const ret = ['NEW', 'EDIT'].includes(value)
            if(!ret) throw '自定义组件 EditDialog 要求 mode 只可以是：NEW,EDIT'
        }, 
    }
})
</script>

父调子函数

// 下面是子组件代码
import { defineExpose } from 'vue'
const getSelected = () => {
    return cateName.value
}
defineExpose({
    getSelected
})

// 下面是父组件代码
<CateSelect ref="cateSelectRef" @change="onChange"/>
    
const cateSelectRef = ref()
const cateName = cateSelectRef.value.getSelected()

子发射事件

// emit 不需要从 vue 导入
const emit = defineEmits(['change']);
// 在指定的逻辑中调用下面方法，触发事件
// 参数一：父组件调用时的事件名称
// 参数二：触发事件时传递的参数
emit('change', val)


// 下面是父组件代码
// 事件名称保证和子组件定义的一致
<CateSelect ref="cateSelectRef" @change="onChange"/>
    
const onChange = val => {
    console.log(val)
}