【金秋打卡】第9天 Vue3 + Typescript 从0到1开发通用基础组件（3-14~3-16）

课程名称：Vue3 + Typescript 从0到1开发通用基础组件

课程章节：
3-14 typescript 对 组件的加持
3-15 vue3 teleport 第一部分
3-16 vue3 teleport 第二部分

课程讲师：张轩

课程内容：

今天课程学习的主要知识点内容包括：
1、vue3 中的 defineComponent 函数；
2、vue3 中的 teleport 组件；

课程收获：

通过学习老师的视频课程和同学的公开笔记，主要收获如下：
一、vue3 中的 defineComponent 函数
defineComponent完全是为了服务ts所存在的，使用defineComponent进行组件定义。

<script lang="ts">
import { defineComponent } from 'vue'
const component = 
 defineComponent({
  name: 'HelloWorld',
  props: {
    msg: {
      required: true,
      type: String
    }
  }, 
  setup(props, context) {
    console.log(props)
    console.log(context)
  }
})
export default component;
</script>

二、vue3 中的 teleport 组件
1、解决的问题：
（1）vue开发中常常遇见组件嵌套很深的情况，可能会导致出现某些错误；
（2）dialog被包裹在其他组件之中，容易被干扰；
（3）样式也在其他组件中，容易变的混乱；

2、Teleport使用：
Teleport 传送 to="#modal" 渲染到modal 节点上；

3、案例举例

<template>
<teleport to="#modal">
  <div id="center" v-if="isOpen">
    <h2><slot>this is a modal</slot></h2>
    <button @click="buttonClick">Close</button>
  </div>
</teleport>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  props: {
    isOpen: Boolean,
  },
  emits: {
    'close-modal': null
  },
  setup(props, context) {
    const buttonClick = () => {
      context.emit('close-modal')
    }
    return {
      buttonClick
    }
  }
})
</script>