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


Posted in Javascript onSeptember 07, 2018

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 点击按钮实现动态挂载子组件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 Javascript
jQuery实现返回顶部效果的方法
May 29 Javascript
浅析AngularJs HTTP响应拦截器
Dec 28 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
Dec 08 Javascript
JavaScript 函数节流详解及方法总结
Feb 09 Javascript
js, jQuery实现全选、反选功能
Mar 08 Javascript
详细分析单线程JS执行问题
Nov 22 Javascript
JS中用EL表达式获取上下文参数值的方法
Mar 28 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 Javascript
关于JavaScript中高阶函数的魅力详解
Sep 07 #Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 #Javascript
对类Vue的MVVM前端库的实现代码
Sep 07 #Javascript
cnpm加速Angular项目创建的方法
Sep 07 #Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 #Javascript
vue 点击按钮增加一行的方法
Sep 07 #Javascript
详解使用jest对vue项目进行单元测试
Sep 07 #Javascript
You might like
用PHP实现多服务器共享SESSION数据的方法
2007/03/16 PHP
php读取文件内容到数组的方法
2015/03/16 PHP
PHP数组相关函数汇总
2015/03/24 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
CI框架实现cookie登陆的方法详解
2016/05/18 PHP
IE和FireFox(FF)中js和css的不同
2009/04/13 Javascript
js实现的真正的iframe高度自适应(兼容IE,FF,Opera)
2010/03/07 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
2014/06/23 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
bootstrap table操作技巧分享
2017/02/15 Javascript
JS基于贪心算法解决背包问题示例
2017/11/27 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
vue 手机物理监听键+退出提示代码
2020/09/09 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
[56:35]DOTA2上海特级锦标赛C组小组赛#1 OG VS Archon第二局
2016/02/27 DOTA
用实例说明python的*args和**kwargs用法
2013/11/01 Python
Python help()函数用法详解
2014/03/11 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
tesserocr与pytesseract模块的使用方法解析
2019/08/30 Python
python简单实现插入排序实例代码
2020/12/16 Python
matplotlib 范围选区(SpanSelector)的使用
2021/02/24 Python
二手书店创业计划书
2014/01/16 职场文书
项目工作说明书
2014/07/29 职场文书
课程设计的心得体会
2014/09/03 职场文书
2015年员工工作表现评语
2015/03/25 职场文书
2015年个人招商工作总结
2015/04/25 职场文书
Java Dubbo框架知识点梳理
2021/06/26 Java/Android
Python爬虫入门案例之爬取二手房源数据
2021/10/16 Python
Pandas搭配lambda组合使用详解
2022/01/22 Python