Vue创建命令式组件

757 阅读1分钟

MyMessage.vue

<template>
    <h1>{{ message }}</h1>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    message: {
      type: String
    }
  }
})
</script>

MyMessage.ts

import MyMessage from './MyMessage.vue'
import { createApp } from 'vue'

export default function (msg: string):void {
  const comp = createApp(MyMessage, {
    message: msg
  })

  const div = document.createElement('div')
  document.body.appendChild(div)
  comp.mount(div)

  setTimeout(() => {
    comp.unmount()
    document.body.removeChild(div)
  }, 2000)
}