官網查看： 混入

基礎

---

混入 (mixin) 提供了一種非常靈活的方式，來分發 Vue 組件中的可復用功能。一個混入對象可以包含任意組件選項。當組件使用混入對象時，所有混入對象的選項將被“混合”進入該組件本身的選項。
例子：

// 定義一個混入對象 var myMixin = {created: function () {this.hello()},methods: {hello: function () {console.log('hello from mixin!')}} }// 定義一個使用混入對象的組件 var Component = Vue.extend({mixins: [myMixin] })var component = new Component() // => "hello from mixin!"

選項合并

---

當組件和混入對象含有同名選項時，這些選項將以恰當的方式進行“合并”。

比如，數據對象在內部會進行遞歸合并，并在發生沖突時以組件數據優先。

var mixin = {data: function () {return {message: 'hello',foo: 'abc'}} }new Vue({mixins: [mixin],data: function () {return {message: 'goodbye',bar: 'def'}},created: function () {console.log(this.$data)// => { message: "goodbye", foo: "abc", bar: "def" }} })

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

var mixin = {created: function () {console.log('混入對象的鉤子被調用')} }new Vue({mixins: [mixin],created: function () {console.log('組件鉤子被調用')} })// => "混入對象的鉤子被調用" // => "組件鉤子被調用"

值為對象的選項，例如 methods、components 和 directives，將被合并為同一個對象。兩個對象鍵名沖突時，取組件對象的鍵值對。

var mixin = {methods: {foo: function () {console.log('foo')},conflicting: function () {console.log('from mixin')}} }var vm = new Vue({mixins: [mixin],methods: {bar: function () {console.log('bar')},conflicting: function () {console.log('from self')}} })vm.foo() // => "foo" vm.bar() // => "bar" vm.conflicting() // => "from self"

注意：Vue.extend() 也使用同樣的策略進行合并。

全局混入

---

混入也可以進行全局注冊。使用時格外小心！一旦使用全局混入，它將影響每一個之后創建的 Vue 實例。使用恰當時，這可以用來為自定義選項注入處理邏輯。

// 為自定義的選項 'myOption' 注入一個處理器。 Vue.mixin({created: function () {var myOption = this.$options.myOptionif (myOption) {console.log(myOption)}} })new Vue({myOption: 'hello!' }) // => "hello!"

請謹慎使用全局混入，因為它會影響每個單獨創建的 Vue 實例 (包括第三方組件)。大多數情況下，只應當應用于自定義選項，就像上面示例一樣。推薦將其作為插件發布，以避免重復應用混入。

自定義選項合并策略

自定義選項將使用默認策略，即簡單地覆蓋已有值。如果想讓自定義選項以自定義邏輯合并，可以向 Vue.config.optionMergeStrategies 添加一個函數：

Vue.config.optionMergeStrategies.myOption = function (toVal, fromVal) {// 返回合并后的值 }

對于多數值為對象的選項，可以使用與 methods 相同的合并策略：

var strategies = Vue.config.optionMergeStrategies strategies.myOption = strategies.methods

可以在 Vuex 1.x 的混入策略里找到一個更高級的例子：

const merge = Vue.config.optionMergeStrategies.computed Vue.config.optionMergeStrategies.vuex = function (toVal, fromVal) {if (!toVal) return fromValif (!fromVal) return toValreturn {getters: merge(toVal.getters, fromVal.getters),state: merge(toVal.state, fromVal.state),actions: merge(toVal.actions, fromVal.actions)} }

還可參考： https://www.jianshu.com/p/1bfd582da93e

example：

index.js里

common.js里

export default {data () {return {actionType: 'add'}},methods: {// 區分操作類型init () {if (this.$route.params.type) {sessionStorage.setItem('actionType', this.$route.params.type)this.actionType = this.$route.params.type} else {this.actionType = sessionStorage.getItem('actionType')}},// 通過路由跳轉頁面goto (name, params) {if (params) {return this.$router.push({name: name, params})}this.$router.push({name: name})},// 取消ModalcancelModal (e) {this[`${e}`] = false},// 獲取焦點getFocus (name) {setTimeout(() => {this.$refs[name].focus()}, 200)},// 提交表單handleSubmit (name, fn) {this.$refs[name].validate((valid) => {if (valid) {fn()} else {this.$Message.error('校驗失敗!')}})},// 表單返回handleReset (name) {this.$refs[name].resetFields()this.$router.back()},// 普通返回back () {this.$router.back()}} }

在組件中使用：

點擊事件時：

總結

以上是生活随笔為你收集整理的Vue项目实战08 ： vue之mixin理解与使用的全部內容，希望文章能夠幫你解決所遇到的問題。

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