VUE动态创建使用组件、覆盖根组件

app根组件

let app = new Vue({
  el: '#app',
  data() {
    return {
    }
  }, 
  methods: {
  },
});


let MyMsg = Vue.extend({
    template: '
这是我的组件，动态添加
'
})

Vue.component('my-msg', MyMsg);


// 动态创建使用组件，关键是要先生成一个容器节点
const createMyMsg = () => {
  const body = document.body;
  const msgDiv = document.createElement('div')
  msgDiv.setAttribute('id', 'my-msg-id')
  body.appendChild(msgDiv)
  
  return new Vue({
    render: (createElement) => {
      // return createElement('my-msg'); // 使用全局组件方式
      return createElement(MyMsg);
    }
  }).$mount('#my-msg-id') // 把id换成app则覆盖app根组件内容
}

setTimeout(()=>{
    createMyMsg();
},1000);