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 相关文章推荐
checkbox 复选框不能为空
Jul 11 Javascript
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
Jun 05 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
vuejs使用递归组件实现树形目录的方法
Sep 30 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
Sep 25 Javascript
Vue递归实现树形菜单方法实例
Nov 06 Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 Javascript
JavaScript 如何在浏览器中使用摄像头
Dec 02 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
Windows下的PHP5.0详解
2006/11/18 PHP
php支付宝接口用法分析
2015/01/04 PHP
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
深入理解PHP中mt_rand()随机数的安全
2017/10/12 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
基于jquery的气泡提示效果
2010/05/31 Javascript
js删除所有的cookie的代码
2010/11/25 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
[原创]JavaScript语法高亮插件highlight.js用法详解【附highlight.js本站下载】
2016/11/01 Javascript
js实现放大镜特效
2017/05/18 Javascript
jQuery自动或手动图片切换效果
2017/10/11 jQuery
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
[03:37]2015国际邀请赛第四日现场精彩集锦
2015/08/08 DOTA
python解析文件示例
2014/01/23 Python
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
Python实现抓取HTML网页并以PDF文件形式保存的方法
2018/05/08 Python
浅谈Django+Gunicorn+Nginx部署之路
2019/09/11 Python
详解Python中openpyxl模块基本用法
2021/02/23 Python
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
Internet体系结构
2014/12/21 面试题
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
双创工作实施方案
2014/03/26 职场文书
《忆江南》教学反思
2014/04/07 职场文书
旅游节目策划方案
2014/05/26 职场文书
2014年卫生监督工作总结
2014/12/09 职场文书
三好学生评语大全
2014/12/29 职场文书
部队2015年终工作总结
2015/04/02 职场文书
销售开票员岗位职责
2015/04/15 职场文书
【海涛dota解说】海涛小满开黑4v5被破两路翻盘潮汐第一视角解说
2022/04/01 DOTA