混入 (mixins) 是一種分發 Vue 組件中可復用功能的非常靈活的方式。混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。

• 數據對象合并

  數據對象在內部會進行淺合并 (一層屬性深度)，在和組件的數據發生沖突時以組件數據優先

var mixin = {data() {return {msg_mixins: 'mixins', msg: '123' } } } var app = new Vue({ mixins: [mixin], el: '#app', data: { msg: 'app' } })

• 鉤子函數合并

同名鉤子函數將混合為一個數組，因此都將被調用。另外，混入對象的鉤子將在組件自身鉤子之前調用。

var mixin = {data() {return {msg_mixins: 'mixins', msg: '123' } }, created: function () { console.log('混入對象的鉤子被調用') } } var app = new Vue({ mixins: [mixin], el: '#app', data: { msg: 'app' }, created: function () { console.log('組件鉤子被調用') } }) 混入鉤子函數.png

• methods, components 和 directives合并

methods, components 和 directives，將被混合為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對。

var mixin = {data() {return {msg_mixins: 'mixins', msg: '123' } }, created: function () { console.log('混入對象的鉤子被調用') }, methods: { foo: function () { console.log('foo') }, conflicting: function () { console.log('from mixin') } } } var app = new Vue({ mixins: [mixin], el: '#app', data: { msg: 'app' }, created: function () { console.log('組件鉤子被調用') }, methods: { bar: function () { console.log('bar') }, conflicting: function () { console.log('from self') } } }) 方法混合.png

• 全局混入

一旦使用全局混入對象，將會影響到 所有 之后創建的 Vue 實例。

Vue.mixin({created: function () {console.log('全局混入') } })

?

轉載于:https://www.cnblogs.com/huancheng/p/10167008.html

總結

以上是生活随笔為你收集整理的Vue全局混入的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。