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 相关文章推荐
再次更新!MSClass (Class Of Marquee Scroll通用不间断滚动JS封装类 Ver 1.6)
Feb 05 Javascript
JavaScript判断两种格式的输入日期的正确性的代码
Mar 25 Javascript
JS操作图片(增,删,改) 例子
Apr 17 Javascript
jquery实现保存已选用户
Jul 21 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
jQuery实现验证年龄简单思路
Feb 24 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 Javascript
微信小程序城市定位的实现实例(获取当前所在国家城市信息)
May 17 Javascript
原生JS实现隐藏显示图片 JS实现点击切换图片效果
Jan 27 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
浅析Vue下的components模板使用及应用
Nov 27 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中突破基于HTTP_REFERER的防盗链措施(stream_context_create)
2011/03/29 PHP
php判断电脑访问、手机访问的例子
2014/05/10 PHP
PHP的静态方法与普通方法用法实例分析
2019/09/26 PHP
JavaScript 中的replace方法说明
2007/04/13 Javascript
js 可拖动列表实现代码
2011/12/13 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
IScroll5 中文API参数说明和调用方法
2016/05/21 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
JavaScript数据结构中串的表示与应用实例
2017/04/12 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
Vue中props的详解
2019/05/16 Javascript
微信小程序实现左侧滑栏过程解析
2019/08/26 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
vue实现二级导航栏效果
2019/10/19 Javascript
vue打包静态资源后显示空白及static文件路径报错的解决
2020/09/02 Javascript
javascript全局自定义鼠标右键菜单
2020/12/08 Javascript
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
python3 破解 geetest(极验)的滑块验证码功能
2018/02/24 Python
使用python3实现操作串口详解
2019/01/01 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
基于python实现坦克大战游戏
2020/10/27 Python
HTML5 video 上传预览图片视频如何设置、预览视频某秒的海报帧
2018/08/28 HTML / CSS
h5封装下拉刷新
2020/08/25 HTML / CSS
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
管理部副部长岗位职责范文
2014/03/09 职场文书
学生评语大全
2014/04/18 职场文书
村党的群众路线教育实践活动工作总结
2014/10/25 职场文书
体育教师个人工作总结
2015/02/09 职场文书
道士塔读书笔记
2015/06/30 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书