通过 Vue.mixin() 方法来全局注册一个mixin，或在组件中的 mixins 选项中注册一个mixin:
js
// 定义一个mixin
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
// 全局注册
Vue.mixin(myMixin)
// 在组件中注册
new Vue({
mixins: [myMixin]
})
当组件和mixin含有同名选项时，这些选项将以恰当的方式进行“合并”。
具体来说，组件的选项优先级高于mixin，这样可以通过mixin来扩展组件选项。
下面是一个使用mixin的示例：
js
// 定义一个mixin
var myMixin = {
created: function () {
this.sayHello()
},
methods: {
sayHello: function () {
console.log('hello from mixin!')
}
}
}
// 定义一个组件
Vue.component('my-component', {
mixins: [myMixin],
created: function () {
console.log('hello from component!')
}
})
// 创建Vue实例
new Vue({
el: '#app'
})
在这个示例中，myMixin定义了一个方法sayHello()，my-component组件使用了myMixin，并且也定义了一个created方法。在控制台中的输出结果为：
hello from mixin! hello from component!
需要注意的是，mixin中的数据、生命周期钩子等选项将被每个组件实例混合。
如果组件和mixin含有同名的数据选项，那么这些数据会在组件中以就近原则覆盖mixin中的数据。
如果你希望mixin中的数据不会影响到组件中的数据，可以使用深度克隆来解决这个问题。
总结一下，使用mixin可以实现代码的复用和组件的继承，可以在mixin中定义一些常用的方法和数据，在组件中使用mixin来扩展其选项。但需要注意的是，mixin中的数据选项会被每个组件实例混合，因此需要注意命名冲突问题。