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

• 數(shù)據(jù)對象合并

  數(shù)據(jù)對象在內(nèi)部會進行淺合并 (一層屬性深度)，在和組件的數(shù)據(jù)發(fā)生沖突時以組件數(shù)據(jù)優(yōu)先

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

• 鉤子函數(shù)合并

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

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

• methods, components 和 directives合并

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

var mixin = {data() {return {msg_mixins: 'mixins', msg: '123' } }, created: function () { console.log('混入對象的鉤子被調(diào)用') }, 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('組件鉤子被調(diào)用') }, methods: { bar: function () { console.log('bar') }, conflicting: function () { console.log('from self') } } }) 方法混合.png

• 全局混入

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

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/huancheng/p/10167008.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。