import Vue from ’vue’/** * @param Component 組件實例的選項對象 * @param props 組件實例中的prop */export function create(Component, props) { const comp = new (Vue.extend(Component))({ propsData: props }).$mount() document.body.appendChild(comp.$el) comp.remove = () => { document.body.removeChild(comp.$el) comp.$destroy() } return comp}方式二

import Vue from ’vue’export function create(Component, props) { // 借雞生蛋new Vue({render() {}}),在render中把Component作為根組件 const vm = new Vue({ // h是createElement函數，它可以返回虛擬dom render(h) { console.log(h(Component,{ props })); // 將Component作為根組件渲染出來 // h(標簽名稱或組件配置對象，傳遞屬性、事件等，孩子元素) return h(Component, { props }) } }).$mount() // 掛載是為了把虛擬dom變成真實dom // 不掛載就沒有真實dom // 手動追加至body // 掛載之后$el可以訪問到真實dom document.body.appendChild(vm.$el) console.log(vm.$children); // 實例 const comp = vm.$children[0] // 淘汰機制 comp.remove = () => { // 刪除dom document.body.removeChild(vm.$el) // 銷毀組件 vm.$destroy() } // 返回Component組件實例 return comp}使用

A組件（要動態創建的組件）

<template> <div class='a'> <h2>{{ title }}</h2> <p>{{ data }}</p> </div></template><script>export default { props: { title: { type: String, default: 'hello world!' }, message: { type: String, default: 'o(∩_∩)o 哈哈' }, duration: { type: Number, default: 1000 } }, data() { return { data: '我是a組件', }; }, created() { let num = 1 const timer = setInterval(() => { this.data = num++ }, this.duration) this.$once('hook: beforeDestroy', () => clearInterval(timer)) }};</script><style>.a { position: fixed; width: 100%; top: 16px; left: 0; text-align: center; pointer-events: none; background-color: #fff; border: grey 3px solid; box-sizing: border-box;}</style>

B組件（操作動態創建組件的地方）

<template> <div class='b'> <button @click='createA'>創建</button> </div></template><script>import A from '@/components/A.vue'import { create } from '@/utils/create.js'export default { components: { A, }, methods: { createA() { // 創建A組件，并掛載到body上 create(A, { title: 'vue', message: '么么噠😙' }) } },};</script>

以上就是vue 動態創建組件的兩種方法的詳細內容，更多關于vue 動態創建組件的資料請關注好吧啦網其它相關文章！