脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 点击按钮实现动态挂载子组件

vue 点击按钮实现动态挂载子组件的方法

 更新时间：2018年09月07日 11:01:14   作者：weixin_39099609  
今天小编就为大家分享一篇vue 点击按钮实现动态挂载子组件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue.extend( options )

参数：

{Object} options

用法：

使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

data 选项是特例，需要注意 - 在 Vue.extend() 中它必须是函数

示例：子组件 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);
 // 创建 Profile 实例，并挂载到一个元素上。
   new Profile().$mount('.dync.mount');
 }
.....
}

以上这篇vue 点击按钮实现动态挂载子组件的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue3清空let arr = reactive([])的实现示例

    vue3清空let arr = reactive([])的实现示例

    本文主要介绍了vue3清空let arr = reactive([])的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-03-03
  • 简单理解vue中el、template、replace元素

    简单理解vue中el、template、replace元素

    这篇文章主要帮助大家简单理解vue中el、template、replace元素,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • 如何快速上手Vuex

    如何快速上手Vuex

    本文主要介绍了Javascript中Vuex的相关知识。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • Vue中transition标签的基本使用教程

    Vue中transition标签的基本使用教程

    Vue提供了transition的封装组件,可以给任何元素和组件添加进入/离开过渡,下面这篇文章主要给大家介绍了关于Vue中transition标签基本使用的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-08-08
  • vue实现分页加载效果

    vue实现分页加载效果

    这篇文章主要为大家详细介绍了vue实现分页加载效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-12-12
  • vue.js组件之间传递数据的方法

    vue.js组件之间传递数据的方法

    本篇文章主要介绍了vue.js组件之间传递数据的方法，组件实例的作用域是相互独立的，如何传递数据也成了组件的重要知识点之一，有兴趣的可以了解一下
    2017-07-07
  • vue组件内部引入外部js文件的方法

    vue组件内部引入外部js文件的方法

    这篇文章主要介绍了vue组件内部引入外部js文件的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • proxy实现vue3数据双向绑定原理

    proxy实现vue3数据双向绑定原理

    这篇文章主要介绍了proxy实现vue3数据双向绑定原理,文章以介绍proxy的优点开始展开全文内容，围绕proxy实现vue3数据双向绑定的相关资料，,需要的朋友可以参考一下
    2021-12-12
  • 前端vue框架select下拉数据量过大造成卡顿问题解决办法

    前端vue框架select下拉数据量过大造成卡顿问题解决办法

    这篇文章主要给大家介绍了关于前端vue框架select下拉数据量过大造成卡顿问题解决办法,文中通过示例代码介绍的非常详细,对大家学习或者使用select具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • Vue实现刷新当前页面的三种方式总结

    Vue实现刷新当前页面的三种方式总结

    项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面。本文为大家整理了三种不同的实现方法，需要的可以参考一下
    2023-01-01

最新评论