Vue.extend挂载到实例上

2020-04-02 08:44:01

主要是做个笔记


根据官网的说法,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')

1

2

3

4

5

6

7

8

9

10

11

12

13

最终结果如下:

<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

}

}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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


import Vue from 'Vue'

import myComponent from './src/component/expend/main.js'

Vue.use(myComponent)

1

2

3

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


this.$YOURNAME(param)


  • 2018-11-01 22:08:19

    Android Toolbar左、中、右对齐

    默认的Android Toolbar中添加子元素view是从左到右依次添加。需要注意的是,Android Toolbar为自身的NavigationIcon(app:navigationIcon)最靠右,Logo(app:logo)紧接NavigationIcon、Title(app:title)接续Logo、保留了默认的位置(从左边到右)。这些Android Toolbar保留的系统设置字段将挤压开发者自己安放在Toolbar中的子view,如图所示:

  • 2018-11-06 06:42:59

    XUtils3框架数据库的基本使用方法

    今天给大家带来数据库模块的讲解,现在主流的ORM框架很多,比如OrmLite,GreenDao,Active Android,Realm等等,这些框架每个都有自己的优点和缺点,大家完全可以根据自己项目的实际需求进行选择,下面开始进入今天的数据库模块的介绍。

  • 2018-11-17 21:05:48

    Android ANR发生的原因总结和解决办法

    ANR的全称是application not responding,是指应用程序未响应,Android系统对于一些事件需要在一定的时间范围内完成,如果超过预定时间能未能得到有效响应或者响应时间过长,都会造成ANR。一般地,这时往往会弹出一个提示框,告知用户当前xxx未响应,用户可选择继续等待或者Force Close。

  • 2018-11-17 21:08:09

    Android 单个应用的内存限制

    获取Android手机应用内存大小 手机不同其性能也不同,手机本身内存可能有大有小,所以针对每个应用的内存大小也不相同。