vue3.0 父子组件传值(语法糖)

一、父子组件交互

<template>
    <el-icon :size="size" :color="color" @click="change">
        <component :is="name"></component>
    </el-icon>
</template>

<script setup>
import { defineProps, defineEmits, defineExpose} from 'vue'

// 定义传值类型
const props = defineProps({
    name: {
        type: String,
        required: true,
    },
    size: {
        type: String,
        default: '',
    },
    color: {
        type: String,
        default: '',
    },
})

// 定义事件名
const emit = defineEmits(['change']) 

// 触发事件
const change =()=>{
    emit('change',{name:21231,data:456})
}

defineExpose({
    change,props
})

</script>