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

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

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

Vue.extend( options )

參數(shù)：

{Object} options

用法：

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

data 選項(xiàng)是特例，需要注意 - 在 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 實(shí)例，并掛載到一個(gè)元素上。
   new Profile().$mount('.dync.mount');
 }
.....
}

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

您可能感興趣的文章:

相關(guān)文章

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

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

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

2022-05-05

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

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

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/的解決方案,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

2023-07-07

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

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

2018-05-05

策略模式實(shí)現(xiàn) Vue 動(dòng)態(tài)表單驗(yàn)證的方法

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

2019-09-09