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-01-18 11:26:53

    浅谈js运行机制(线程)

    从开始接触js时,我们便知道js是单线程的。单线程,异步,同步,互调,阻塞等。在实际写js的时候,我们都会用到ajax,不管是原生的实现,还是借助jQuery等工具库实现,我们都知道,ajax可以实现局部刷新,并且在请求处理时,任然可以响应用户的操作,比如点击事件。不是说js是单线程吗?这些都是怎么实现的? 在阅读《深入理解Bootrap的源码》一书,在分析轮播组件(carousel.js)的源码时,作者对一句代码操作的注释引起了我的兴趣。

  • 2018-01-18 17:41:05

    Fatal error: Class 'Memcached' not found

    从别地方复制来了新的配置文件,包了这样的错误,因为我也是刚刚安装了php7,以为是php的问题,于是就根据网上的提示,安装memcached.dll包。

  • 2018-01-20 20:33:58

    PHP中session_cache_limiter() 是什么意思啊

    session_cache_limiter('public'); session_cache_expire(30); session_start();第三个我晓得 前两个 网络上没找着资料 手册上全是英文的 翻译后 还是看不懂主要是没翻译正确