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 相关文章推荐
JQuery与Ajax常用代码实现对比
Oct 03 Javascript
基于mootools 1.3框架下的图片滑动效果代码
Apr 22 Javascript
javascript打印html内容功能的方法示例
Nov 28 Javascript
IE下双击checkbox反应延迟问题的解决方法
Mar 27 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
详解本地Node.js服务器作为api服务器的解决办法
Feb 28 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
Mar 02 Javascript
JavaScript观察者模式(publish/subscribe)原理与实现方法
Mar 30 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
实现一个完整的Node.js RESTful API的示例
Sep 29 Javascript
Vue中的vue-resource示例详解
Nov 02 Javascript
Vue商品控件与购物车联动效果的实例代码
Jul 21 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
10款PHP开源商城系统汇总介绍
2015/07/23 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
JavaScript中的事件处理
2008/01/16 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
2013/01/23 Javascript
微信小程序 配置文件详细介绍
2016/12/14 Javascript
Highcharts+NodeJS搭建数据可视化平台示例
2017/01/01 NodeJs
详解vue表单——小白速看
2018/04/08 Javascript
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
小程序跳转H5页面的方法步骤
2020/03/06 Javascript
使用python开发vim插件及心得分享
2014/11/04 Python
Python内置函数之filter map reduce介绍
2014/11/30 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
python中多层嵌套列表的拆分方法
2018/07/02 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
在matplotlib的图中设置中文标签的方法
2018/12/13 Python
Python中捕获键盘的方式详解
2019/03/28 Python
搞定这套Python爬虫面试题(面试会so easy)
2019/04/03 Python
python3多线程知识点总结
2019/09/26 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
Python 找出英文单词列表(list)中最长单词链
2020/12/14 Python
详解CSS3 rem(设置字体大小) 教程
2017/11/21 HTML / CSS
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
医学专业五年以上个人求职信
2013/12/03 职场文书
铁路工务反思材料
2014/02/07 职场文书
求职自我推荐信
2014/06/25 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
创业计划书之密室逃脱
2019/11/08 职场文书
导游词之安徽巢湖
2019/12/26 职场文书
Windows10下安装MySQL8
2021/04/06 MySQL
浅谈node.js中间件有哪些类型
2021/04/29 Javascript