vue 動態(tài)創(chuàng)建組件的兩種方法
更新時間:2020年12月31日 11:07:38 作者:_冰
這篇文章主要介紹了vue 動態(tài)創(chuàng)建組件的兩種方法,幫助大家更好的理解和使用vue框架,感興趣的朋友可以了解下
Vue動態(tài)創(chuàng)建組件實例并掛載到body
方式一
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函數(shù),它可以返回虛擬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組件(要動態(tài)創(chuàng)建的組件)
<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組件(操作動態(tài)創(chuàng)建組件的地方)
<template> <div class="b"> <button @click="createA">創(chuàng)建</button> </div> </template> <script> import A from "@/components/A.vue" import { create } from "@/utils/create.js" export default { components: { A, }, methods: { createA() { // 創(chuàng)建A組件,并掛載到body上 create(A, { title: "vue", message: "么么噠😙" }) } }, }; </script>
以上就是vue 動態(tài)創(chuàng)建組件的兩種方法的詳細內(nèi)容,更多關于vue 動態(tài)創(chuàng)建組件的資料請關注腳本之家其它相關文章!
相關文章
vue+axios?methods方法return取不到值問題及解決
這篇文章主要介紹了vue+axios?methods方法return取不到值問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10vue實現(xiàn)導入json解析成動態(tài)el-table樹表格
本文主要介紹了vue實現(xiàn)導入json解析成動態(tài)el-table樹表格,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2023-02-02解決vue2.0動態(tài)綁定圖片src屬性值初始化時報錯的問題
下面小編就為大家分享一篇解決vue2.0動態(tài)綁定圖片src屬性值初始化時報錯的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03