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

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

今天小編就為大家分享一篇vue 點擊按鈕實現(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 點擊按鈕實現(xiàn)動態(tài)掛載子組件的方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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