vue 點(diǎn)擊按鈕實現(xiàn)動態(tài)掛載子組件的方法

更新時間：2018年09月07日 11:01:14 作者：weixin_39099609

今天小編就為大家分享一篇vue 點(diǎn)擊按鈕實現(xiàn)動態(tài)掛載子組件的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

Vue.extend( options )

參數(shù)：

{Object} options

用法：

使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個“子類”。參數(shù)是一個包含組件選項的對象。

data 選項是特例，需要注意 - 在 Vue.extend() 中它必須是函數(shù)

示例：子組件 byMount.vue

<template>
 <div>
 <div>mount content test!!</div>
 </div>
</template>
<script >
import Vue from 'Vue';
 export default {
 name: 'bycount',
 data () {
  return {  
  }
 }, 
 methods:{
 },
 } 
</script>

父組件：

  <div class="dync mount">dyncMount root</div>
  <button @click = "dyncMount">dyncMount</button>
-----------------------------------------------------
.....
import byMount from './byMount.vue';
....
 export default {
  name: 'parent',
  methods:{
  dyncMount(){
   var Profile = Vue.extend(byMount);
 // 創(chuàng)建 Profile 實例，并掛載到一個元素上。
   new Profile().$mount('.dync.mount');
 }
.....
}

以上這篇vue 點(diǎn)擊按鈕實現(xiàn)動態(tài)掛載子組件的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

這篇文章主要介紹了在Vue項目中使用jsencrypt.js對數(shù)據(jù)進(jìn)行加密傳輸?shù)姆椒?，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-04-04

Vue結(jié)合Openlayers使用Overlay添加Popup彈窗實現(xiàn)

本文主要介紹了Vue結(jié)合Openlayers使用Overlay添加Popup彈窗實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

2022-05-05

vue實現(xiàn)Input輸入框模糊查詢方法

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)Input輸入框模糊查詢方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

2019-10-10

Vue3使用transition組件改變DOM屬性的方式小結(jié)

這篇文章主要為大家詳細(xì)介紹了Vue3中使用transition組件改變DOM屬性的常用方式,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

2024-01-01

vue3?Error:Unknown?variable?dynamic?import:?../views/的解

這篇文章主要給大家介紹了關(guān)于vue3?Error:Unknown?variable?dynamic?import:?../views/的解決方案,文中通過圖文以及實例代碼介紹的非常詳細(xì),需要的朋友可以參考下

2023-07-07

Vue 按鍵修飾符處理事件的方法

這篇文章主要介紹了Vue 按鍵修飾符的相關(guān)資料，vue中新增按鍵修飾符和系統(tǒng)修飾符來處理類似的事件，具體內(nèi)容詳情大家參考下本文

2018-05-05

策略模式實現(xiàn) Vue 動態(tài)表單驗證的方法

策略模式（Strategy Pattern）又稱政策模式，其定義一系列的算法，把它們一個個封裝起來，并且使它們可以互相替換。封裝的策略算法一般是獨(dú)立的，策略模式根據(jù)輸入來調(diào)整采用哪個算法。這篇文章主要介紹了策略模式實現(xiàn) Vue 動態(tài)表單驗證,需要的朋友可以參考下

2019-09-09