Vue.extend 編程式插入組件的實(shí)現(xiàn)
前言
日常中我們要使用一個(gè)彈框組件的方式通常是先通過(guò)Vue.component 全局或是 component 局部注冊(cè)后,然后在模版中使用。接下來(lái)我們嘗試編程式的使用組件。
實(shí)現(xiàn)
其實(shí)步驟很簡(jiǎn)單
- 通過(guò) Vue.extend() 創(chuàng)建構(gòu)造器
- 通過(guò) Vue.$mount() 掛載到目標(biāo)元素上
- 目標(biāo)實(shí)現(xiàn)一個(gè) alert 彈框,確認(rèn)和取消功能如下圖
document.createElement
其實(shí)想要插入一個(gè)元素,通過(guò) document.createElement 就可以實(shí)現(xiàn),并非一定需要上面兩步,但是涉及到組件的復(fù)雜度、樣式設(shè)置、可維護(hù)性所以使用創(chuàng)建構(gòu)造器的方式比較可行。
Vue.extend()
首先來(lái)定義這個(gè)彈框的結(jié)構(gòu)和樣式,就是正常的寫(xiě)組件即可
<template> <div class="grid"> <h1 class="head">這里是標(biāo)題</h1> <div @click="close">{{ cancelText }}</div> <div @click="onSureClick">{{ sureText }}</div> </div> </template> <script> export default { props:{ close:{ type:Function, default:()=>{} }, cancelText:{ type:String, default:'取消' }, sureText:{ type:String, default:'確定' } }, methods:{ onSureClick(){ // 其他邏輯 this.close() } } }; </script>
將創(chuàng)建構(gòu)造器和掛載到目標(biāo)元素上的邏輯抽離出來(lái),多處可以復(fù)用
export function extendComponents(component,callback){ const Action = Vue.extend(component) const div = document.createElement('div') document.body.appendChild(div) const ele = new Action({ propsData:{ cancelText:'cancel', sureText:'sure', close:()=>{ ele.$el.remove() callback&&callback() } } }).$mount(div) }
上面代碼需要注意以下幾點(diǎn):
- Vue.extend 獲得是一個(gè)構(gòu)造函數(shù),可以通過(guò)實(shí)例化生成一個(gè) Vue 實(shí)例
- 實(shí)例化時(shí)可以向這個(gè)實(shí)例傳入?yún)?shù),但是需要注意的是 props 的值需要通過(guò) propsData 屬性來(lái)傳遞
- 得到 Vue 實(shí)例后,我們需要通過(guò)一個(gè)目標(biāo)元素來(lái)掛載它,有人首先會(huì)想到掛載到 #app 上,這個(gè)掛載的過(guò)程是將目標(biāo)元素的內(nèi)容全部替換,所以一旦掛載到 #app 上,該元素的所有子元素都會(huì)消失被替換
- 針對(duì)第3點(diǎn),所以創(chuàng)建了一個(gè) div 元素插入到 body 中,我們將想要掛載的內(nèi)容替換到這個(gè)div上
Vue.extend 和 Vue.component component 的區(qū)別
- Vue.component component兩者都是需要先進(jìn)行組件注冊(cè)后,然后在 template 中使用注冊(cè)的標(biāo)簽名來(lái)實(shí)現(xiàn)組件的使用。Vue.extend 則是編程式的寫(xiě)法
- 關(guān)于組件的顯示與否,需要在父組件中傳入一個(gè)狀態(tài)來(lái)控制 或者 在組件外部用 v-if/v-show 來(lái)實(shí)現(xiàn)控制,而 Vue.extend 的顯示與否是手動(dòng)的去做組件的掛載和銷(xiāo)毀。
- Vue.component component 在組件中需要使用 slot 等自定義UI時(shí)更加靈活,而 Vue.extend 由于沒(méi)有 template的使用,沒(méi)有slot 都是通過(guò) props 來(lái)控制UI,更加局限一些。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue 實(shí)現(xiàn)通過(guò)手機(jī)發(fā)送短信驗(yàn)證碼注冊(cè)功能
這篇文章主要介紹了vue 實(shí)現(xiàn)通過(guò)手機(jī)發(fā)送短信驗(yàn)證碼注冊(cè)功能的相關(guān)資料,需要的朋友可以參考下2018-04-04vue結(jié)合Echarts實(shí)現(xiàn)點(diǎn)擊高亮效果的示例
下面小編就為大家分享一篇vue結(jié)合Echarts實(shí)現(xiàn)點(diǎn)擊高亮效果的示例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03element-ui中el-cascader動(dòng)態(tài)加載和默認(rèn)值詳解
vue+elementUI項(xiàng)目中el-cascader級(jí)聯(lián)選擇器使用頻率非常高,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-cascader動(dòng)態(tài)加載和默認(rèn)值的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05Vue 使用 Mint UI 實(shí)現(xiàn)左滑刪除效果CellSwipe
這篇文章主要介紹了Vue 使用 Mint UI 實(shí)現(xiàn)左滑刪除效果CellSwipe,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2018-04-04詳解Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù)
在使用?.vue?定義的組件中,setup?中提供了?defineExpose()?方法,該方法可以將組件內(nèi)部的方法暴露給父組件,這篇文章主要介紹了Vue3?SFC?和?TSX?方式調(diào)用子組件中的函數(shù),需要的朋友可以參考下2022-10-10vue打印的對(duì)象在瀏覽器中顯示的問(wèn)題分析
因?yàn)樵趘ue中對(duì)象都是用了代理重寫(xiě)了get,由于get重寫(xiě)也就導(dǎo)致了瀏覽器不能直接獲取到具體的值,因此才會(huì)在打印的時(shí)候?yàn)?..,手動(dòng)點(diǎn)擊展開(kāi)才顯示具體的值,這篇文章主要介紹了為什么vue打印的對(duì)象在瀏覽器中顯示,需要的朋友可以參考下2024-04-04Vue cli3 庫(kù)模式搭建組件庫(kù)并發(fā)布到 npm的流程
這篇文章主要介紹了Vue cli3 庫(kù)模式搭建組件庫(kù)并發(fā)布到 npm,以下一個(gè)簡(jiǎn)單的顏色選擇器插件 vColorPicker 講述從開(kāi)發(fā)到上線(xiàn)到npm的流程,需要的朋友可以參考下2018-10-10VueJS實(shí)現(xiàn)用戶(hù)管理系統(tǒng)
這篇文章主要為大家詳細(xì)介紹了VueJS實(shí)現(xiàn)用戶(hù)管理系統(tǒng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05