Vue3之defineProps、defineEmits和defineExpose的使用及说明

<template>
    <div>
        <p>{{msg}} - {{exposeStr}} - {{count}}</p>
        <button @click="_click">set msg</button>
        <button @click="count++">加</button>
        <button @click="count--">减</button>
    </div>
</template>

<script setup>
    import {
        ref
    } from 'vue'
    
    const exposeStr = ref('')
    const count = ref(0)
    const open = () => {
        console.log('this is a open function')
    }
    
    const emit = defineEmits(['setMsg'])
    
    const props = defineProps({
        msg: {
            type: String,
            default: 'this is a test component'
        }
    })
    
    const _click = () => {
        emit('setMsg', {msg: props.msg})
    }
    
    defineExpose({
        exposeStr,
        open
    })
</script>

<style>
    
</style>

<script setup>
    import Test from './components/Test.vue'

    import {
        ref
    } from 'vue'
    
    const detail = ref('')
    const setMsg = (val) => {
        detail.value.exposeStr = "set expose msg"
        detail.value.open()
        console.log(val)
    }
</script>

<template>
    <Test ref="detail" msg="this is a test component" @setMsg="setMsg"></Test>
</template>

<style>

</style>