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)


  • 2019-10-23 23:25:22

    PostMapping,GetMapping不固定路径的写法

    PostMapping中的value属性是数组,所以可以定义多个路径,required属性默认是true,不必再写required=true,默认表示该参数是必须要有的,如果写required=false,表示该参数是可选的,可有可无。

  • 2019-10-24 01:14:29

    通过属性搜索商品mysql设计

    属性是可以动态扩展的,问题:属性是搜索条件 问:请展示出 材质为塑料 防水为YES,颜色为绿色的商品详细信息,按照sort_filed排序

  • 2019-10-25 15:18:18

    Vue.use Vue.prototype区别

    1、不是为了vue写的插件(插件内要处理)不支持Vue.use()加载方式 2、非vue官方库不支持new Vue()方式 3、每一个vue组件都是Vue的实例,所以组件内this可以拿到Vue.prototype上添加的属性和方法。

  • 2019-10-25 23:33:45

    php制作漂亮的随机颜色标签云效果

    代码中的array里面的字符串就是各种随机色的编码,大家可以根据自己的需求来配置颜色。 然后input1里面是字体大小的随机代码,也可以自行修改。

  • 2019-10-27 00:23:42

    mac卡住,强制关闭应用

    要正常退出(关闭)Mac 应用,请从菜单栏的应用菜单中选取“退出”,或按下 Command (⌘)-Q。如果应用不退出,请按照以下步骤强制该应用退出。

  • 2019-10-27 11:02:10

    mac不要输入sudo,免密设置

    mac有时候使用终端进行操作,会让输入sudo 并且要输入命令,这要很啰嗦,浪费时间,我们得想办法去掉。