Vue 中使用 mixin、extend、component 等 API 实现组件定制的技巧

// 定义一个 mixin 对象
var myMixin = {
  created: function () {
    console.log('Mixin created.');
  }
}

// 在多个组件中引入 mixin 对象
var app = new Vue({
  mixins: [myMixin],
  created: function () {
    console.log('App created.');
  }
})

var anotherComponent = new Vue({
  mixins: [myMixin],
  created: function () {
    console.log('Another component created.');
  }
})

// 定义一个基础组件
var baseComponent = Vue.extend({
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello, world!'
    }
  }
})

// 使用基础组件定义新组件
var newComponent = Vue.extend({
  mixins: [baseComponent],
  methods: {
    changeMessage: function () {
      this.message = 'Hi, Vue!';
    }
  }
})

// 创建新组件的实例并挂载到 DOM
var app = new newComponent().$mount('#app');

// 全局定义一个组件
Vue.component('my-component', {
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello, world!'
    }
  }
})

// 在模板中引用组件
<div id="app">
  <my-component></my-component>
</div>

// 创建 Vue 实例
var app = new Vue({
  el: '#app'
})

// 局部定义一个组件
var myComponent = {
  template: '<div>{{ message }}</div>',
  data: function () {
    return {
      message: 'Hello, world!'
    }
  }
}

// 在模板中引用组件
<div id="app">
  <my-component></my-component>
</div>

// 创建 Vue 实例
var app = new Vue({
  el: '#app',
  components: {
    'my-component': myComponent
  }
})