vue动态挂载组件

在一些特殊场景下，使用组件的时机无法确定，或者无法在vue的template中确定要我们要使用的组件，这时就需要动态的挂载组件，或者使用运行时编译动态创建组件并挂载。

今天我们将带大家从实际项目出发，看看在实际解决客户问题时，如何将组件进行动态挂载，并为大家展示一个完整的解决动态挂载问题的完整过程。

 v2写法

    import Vue from "vue";
    import ImagePreview from "@/components/ImagePreview"
    var Profile = Vue.extend(ImagePreview)
    const elementNode = document.createElement('div');
    document.body.append(elementNode);
    var test = new Profile({
      propsData: {
        src: 'http://192.168.43.100:8999/profile/upload/2022/12/08/小程序_20221208150231A001.jpg'
      }
    }).$mount(elementNode);

v3写法 

import { createApp } from 'vue';
import TipsMessage from './TipsMessage.vue';
type MessageType = 'success' | 'error' | 'defaults';

const createMessage = (message: string, type: MessageType, timeOut = 2000) => {
  const messageInstance = createApp(TipsMessage, {
    message,
    type
  })
  const elementNode = document.createElement('div');
  document.body.append(elementNode);
  messageInstance.mount(elementNode);
  setTimeout(() =>{
    messageInstance.unmount();
    document.body.removeChild(elementNode);
  }, timeOut)
}

export default createMessage