vue3使用函数创建组件，视频学习

方法1
创建自己想要添加的元素

message.vue

<template>
  <div class="grand-message">
    <h3>{{ n }}</h3>
    <h3>{{ m }}</h3>
    <h1>{{ color }}</h1>
  </div>
</template>

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

export default defineComponent({
  name: 'grandSon',
  props: {
    color: {
      type: String,
      default: '',
    },
  },
  setup() {
    console.log('setup')
    const m = ref(2)
    const n = ref(3)
    return {
      m,
      n,
    }
  },
})
</script>
<style scoped>
.grand-message {
  width: 50px;
  height: 50px;
  background-color: rgb(87, 80, 192);
}
</style>

message.ts(使用js的换成js就可不用严格定义类型)

import { createApp } from 'vue'
import Message from '@/pages/test-module/components/message.vue'

function createMessage(color: string) {
  const messageInstance = createApp(Message, {
    color,
  })
  // 自己创建一个节点挂载组件Message直接挂载到message的根节点body上就不会有其他样式影响
  const mountNode = document.createElement('div')
  //获取父元素节点
  const grandSon: HTMLElement | null = document.getElementById('grand-one-id')
  // console.log(grandSon)
  // console.log(document.body)
  //添加子元素
  grandSon && grandSon.appendChild(mountNode)
  // messageInstance渲染在div中
  messageInstance.mount(mountNode)
  // 过几秒消失
  setTimeout(() => {
    // 移除该节点
    messageInstance.unmount(mountNode)
    grandSon && grandSon.removeChild(mountNode)
  }, 2000)
}
export default createMessage

要操作的vue文件

<a-button type="primary" @click="functionComponent">函数式组件</a-button>
import createMessage from '@/pages/test-module/components/message'
setup(props, { attrs, emit }) {
    const functionComponent = () => {
      createMessage('内容')
    }

    return {
      functionComponent,
    }
  },