Vue3.2 api

1.defineEmits 自定义事件 父子传参使用

const emit=defineEmits(['on-click'])
const clickTip=()=>{
    emit('on-click',list)
}

 2.defineExpose 暴露组件中属性 父组件可以ref取到值

3.defineProps可以用来接收父组件数据

defineProps({
    title:{
        default:"",
        type:string
    },
    data:Array
})

TS版本

defineProps<{
    title:string,
    data:number[]
}>()

4 withDefaults用来设置默认值（父子传参）

// withDefaults用来设置默认值 第一个接收一个defineProps函数，第二个是一个对象
withDefaults(defineProps<props>(),{
    title:123,
    // 复杂数据类型需要函数return
    data:()=>{return [123,232,33]}
})

5.defineAsyncComponent 定义异步组件（需要import 引入  Vue）

const DialogIndex=defineAsyncComponent(()=>import('../src/Dialog/index.vue'))

需要注意的是整个需要配合suspense标签来使用 <suspense> 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。

     <Suspense>
            <template #default>
                <Dialog>
                    <template #default>
                        <DialogIndex></DialogIndex>
                    </template>
                </Dialog>
            </template>
 
            <template #fallback>
                <div>loading...</div>
            </template>
        </Suspense>

6 注册全局组件

第一步在main.js中引入需要注册组件，然后再createApp后面打点component

createApp(App).component('Card',Card).mount('#app')
//第一个是组件名字以后用的 第二个是import引用的

7 使用setup语法糖后无法给组件起名

解决办法就是多写一个script的标签对  需要注意的是 如果是TS那么 必须都是TS

<script lang="ts">
export default {
    name:'Card'
}
</script>

8.传送组件

Teleport 是一种能够将我们的模板渲染至指定DOM节点，不受父级style、v-show等属性影响，但data、prop数据依旧能够共用的技术；类似于 Reac