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 相关文章推荐
js 对象是否存在判断
Jul 15 Javascript
dreamweaver 安装Jquery智能提示
Apr 02 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
jquery实现图片放大镜功能
Nov 23 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
AngularJS实现单一页面内设置跳转路由的方法
Jun 28 Javascript
基于vue+canvas的excel-like组件实例详解
Nov 28 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
Electron 打包问题:electron-builder 下载各种依赖出错(推荐)
Jul 09 Javascript
vue+iview实现分页及查询功能
Nov 17 Vue.js
关于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中的socket_read和socket_recv区别详解
2015/02/09 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
PHP命名空间和自动加载类
2016/04/03 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
PHP实现微信红包金额拆分试玩的算法示例
2018/04/07 PHP
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
JavaScript动态数量的文件上传控件
2016/11/18 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
JavaScript中字符串的常用操作方法及特殊字符
2018/03/18 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
教你如何用Node实现API的转发(某音乐)
2019/09/20 Javascript
Python多线程学习资料
2012/12/19 Python
python3.5 + PyQt5 +Eric6 实现的一个计算器代码
2017/03/11 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
Python上下文管理器用法及实例解析
2019/11/11 Python
python+Django+pycharm+mysql 搭建首个web项目详解
2019/11/29 Python
简单了解Python3 bytes和str类型的区别和联系
2019/12/19 Python
python实现实时视频流播放代码实例
2020/01/11 Python
Python 模拟生成动态产生验证码图片的方法
2020/02/01 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递?
2014/09/09 面试题
不用游标的SQL语句有哪些
2012/09/07 面试题
广州一家公司的.NET面试题
2016/06/11 面试题
违反校纪校规检讨书
2014/02/15 职场文书
体育教师个人的自我评价
2014/02/16 职场文书
考试作弊检讨书大全
2014/02/18 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
实例详解Python的进程,线程和协程
2022/03/13 Python
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL