当前位置:Gxlcms > JavaScript > Vue.extend实现挂载到实例上的方法

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

时间:2021-07-01 10:21:17 帮助过:113人阅读

本文实例讲述了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程序设计有所帮助。

人气教程排行