Vue2的子类创建Vue.extend()方法

Vue.extend

1.传递的参数

Vue.extend({Object})，传递的是一个对象，这个对象包含template等，其实就是传递一个包含组件选项的对象。

他是属于Vue的全局API，用来创建一个Vue的"子类"。

2.使用

2.1 直接用来挂载元素

Vue.extend({Object})放回的是一个构造器，data要写成组件的函数形式，因为创建的是构造器，并非实例，所以要使用这个组件就必须new出来，并通过KaTeX parse error: Expected 'EOF', got '#' at position 8: mount('#̲mount-point')进行…mount()等同于el属性。

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}}</p>',
  data: function () {
    return {
      firstName: 'Wang',
      lastName: 'wu',
    }
  }
})
// 创建 Profile 实例，并挂载到一个元素上。
new Profile().$mount('#mount-point')

//结果：
//<div id="mount-point"></div>
//<p>Walter White aka Heisenberg</p>

2.2 或者用来创建组件

//创建Vue对象
var vue = new Vue({
    el:'mount-point'
})

// 创建构造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}}</p>',
  data: function () {
    return {
      firstName: 'Wang',
      lastName: 'wu',
    }
  }
})

//也可以这样使用，通过传入构造器和指定组件名'my-component'，注册一个全局组件
Vue.component('my-component', Profile)

//结果：我就可以在vue实例挂载的元素中，使用我的组件了
//<div id="mount-point"><my-component></my-component></div>