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ì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

Vue.extend( options )

參數(shù)：

{Object} options

用法：

使用基礎(chǔ) Vue 構(gòu)造器，創(chuàng)建一個(gè)“子類(lèi)”。參數(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)掛載子組件的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue3清空l(shuí)et?arr?=?reactive([])的實(shí)現(xiàn)示例
本文主要介紹了vue3清空l(shuí)et?arr?=?reactive([])的實(shí)現(xiàn)示例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2025-03-03
簡(jiǎn)單理解vue中el、template、replace元素
這篇文章主要幫助大家簡(jiǎn)單理解vue中el、template、replace元素,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
如何快速上手Vuex
本文主要介紹了Javascript中Vuex的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
2017-02-02
Vue中transition標(biāo)簽的基本使用教程
Vue提供了transition的封裝組件,可以給任何元素和組件添加進(jìn)入/離開(kāi)過(guò)渡,下面這篇文章主要給大家介紹了關(guān)于Vue中transition標(biāo)簽基本使用的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-08-08
vue實(shí)現(xiàn)分頁(yè)加載效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁(yè)加載效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
vue.js組件之間傳遞數(shù)據(jù)的方法
本篇文章主要介紹了vue.js組件之間傳遞數(shù)據(jù)的方法，組件實(shí)例的作用域是相互獨(dú)立的，如何傳遞數(shù)據(jù)也成了組件的重要知識(shí)點(diǎn)之一，有興趣的可以了解一下
2017-07-07
vue組件內(nèi)部引入外部js文件的方法
這篇文章主要介紹了vue組件內(nèi)部引入外部js文件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定原理
這篇文章主要介紹了proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定原理,文章以介紹proxy的優(yōu)點(diǎn)開(kāi)始展開(kāi)全文內(nèi)容，圍繞proxy實(shí)現(xiàn)vue3數(shù)據(jù)雙向綁定的相關(guān)資料，,需要的朋友可以參考一下
2021-12-12
前端vue框架select下拉數(shù)據(jù)量過(guò)大造成卡頓問(wèn)題解決辦法
這篇文章主要給大家介紹了關(guān)于前端vue框架select下拉數(shù)據(jù)量過(guò)大造成卡頓問(wèn)題解決辦法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用select具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2023-07-07
Vue實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的三種方式總結(jié)
項(xiàng)目當(dāng)中如果做新增/修改/刪除等等操作通常情況下都需要刷新數(shù)據(jù)或者刷新當(dāng)前頁(yè)面。本文為大家整理了三種不同的實(shí)現(xiàn)方法，需要的可以參考一下
2023-01-01