怎么在vue中通過點(diǎn)擊按鈕實(shí)現(xiàn)動(dòng)態(tài)掛載子組件

本篇文章為大家展示了怎么在vue中通過點(diǎn)擊按鈕實(shí)現(xiàn)動(dòng)態(tài)掛載子組件，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

Vue.extend( options )

參數(shù)：

{Object} options

用法：

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

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的優(yōu)點(diǎn)

Vue具體輕量級框架、簡單易學(xué)、雙向數(shù)據(jù)綁定、組件化、數(shù)據(jù)和結(jié)構(gòu)的分離、虛擬DOM、運(yùn)行速度快等優(yōu)勢，Vue中頁面使用的是局部刷新，不用每次跳轉(zhuǎn)頁面都要請求所有數(shù)據(jù)和dom，可以大大提升訪問速度和用戶體驗(yàn)。

上述內(nèi)容就是怎么在vue中通過點(diǎn)擊按鈕實(shí)現(xiàn)動(dòng)態(tài)掛載子組件，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。