Vue.extend实现挂载到实例上的方法


Posted in Javascript onMay 01, 2019

本文实例讲述了Vue.extend实现挂载到实例上的方法。分享给大家供大家参考,具体如下:

这里主要是做个笔记

根据官网的说法,Vue.extend:是使用基础 Vue 构造器,创建一个“子类”。参数是一个包含组件选项的对象。

官网的用法是:

<div id="mount-point"></div>
// 创建构造器
var Profile = Vue.extend({
 template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
 data: function () {
  return {
   firstName: 'Walter',
   lastName: 'White',
   alias: 'Heisenberg'
  }
 }
})
// 创建 Profile 实例,并挂载到一个元素上。
new Profile().$mount('#mount-point')

最终结果如下:

<p>Walter White aka Heisenberg</p>

感觉这样写不太美观

于是改为下面这样写:

在文件夹./src/component/expend,新建两个文件:main.js和main.vue

main.vue就是你的组件,爱怎么写怎么写

main.js是把组件挂载到实例上,代码如下:

import Vue from 'Vue'
import Main from './main.vue'
let Builder = Vue.extend(Main)
export default {
  install (vue) {
    vue.prototype.$YOURNAME = this.getComponent
  },
  getComponent (param) {
    let instance = new Builder({
      propsData: { param }
    })
    instance.vm = instance.$mount()
    document.body.appendChild(instance.vm.$el)
    return instance
  }
}

在入口文件main.js,添加代码:

import Vue from 'Vue'
import myComponent from './src/component/expend/main.js'
Vue.use(myComponent)

然后在页面中就可以这样使用了:

this.$YOURNAME(param)

希望本文所述对大家vue.js程序设计有所帮助。

Javascript 相关文章推荐
关于javascript document.createDocumentFragment()
Apr 04 Javascript
appendChild() 或 insertBefore()使用与区别介绍
Oct 11 Javascript
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
用js模拟struts2的多action调用示例
May 19 Javascript
js+css简单实现网页换肤效果
Dec 29 Javascript
jquery+json实现分页效果
Mar 07 Javascript
简单实现js间歇或无缝滚动效果
Jun 29 Javascript
浅谈关于.vue文件中style的scoped属性
Aug 19 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
May 14 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
详解JavaScript类型判断的四种方法
Oct 21 Javascript
JS html事件冒泡和事件捕获操作示例
May 01 #Javascript
JS实现的贪吃蛇游戏案例详解
May 01 #Javascript
javascript原型链学习记录之继承实现方式分析
May 01 #Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 #Javascript
微信小程序常见页面跳转操作简单示例
May 01 #Javascript
浅谈对于react-thunk中间件的简单理解
May 01 #Javascript
vue增加强缓存和版本号的实现方法
May 01 #Javascript
You might like
PHP操作MySQL事务实例
2014/11/05 PHP
PHP中对数组的一些常用的增、删、插操作函数总结
2015/11/27 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
JavaScipt基本教程之前言
2008/01/16 Javascript
JavaScript 异步调用框架 (Part 6 - 实例 &amp; 模式)
2009/08/04 Javascript
让元素在网页中可拖动示例代码
2013/08/13 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
对Angular.js Controller如何进行单元测试
2016/10/25 Javascript
使用FileReader API创建Vue文件阅读器组件
2018/04/03 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
js判断浏览器的环境(pc端,移动端,还是微信浏览器)
2020/12/24 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
Python编程产生非均匀随机数的几种方法代码分享
2017/12/13 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
Python实现的生产者、消费者问题完整实例
2018/05/30 Python
解决Python安装后pip不能用的问题
2018/06/12 Python
对python中dict和json的区别详解
2018/12/18 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
python 实现简单的FTP程序
2019/12/27 Python
详解淘宝H5 sign加密算法
2020/08/25 HTML / CSS
学校卫生检查制度
2014/02/03 职场文书
读群众路线心得体会
2014/03/07 职场文书
党员志愿者活动方案
2014/08/28 职场文书
大学生第一学年自我鉴定
2014/09/12 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
党的群众路线教育实践活动个人整改措施
2014/10/27 职场文书
党支部书记岗位职责
2015/02/15 职场文书
通讯稿范文
2015/07/22 职场文书
2019最新企业员工考勤管理制度(通用版)!
2019/07/02 职场文书
情侣餐厅的创业计划书范本!
2019/07/26 职场文书
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
spring 项目实现限流方法示例
2022/07/15 Java/Android