vue混入-Mixins
阿新 • • 發佈：2020-08-13
vue混入-Mixins
混入 (mixins) 是一種分發 Vue 元件中可複用功能的非常靈活的方式。
混入定義了一部分可複用的方法或者計算屬性。
混入物件可以包含任意元件選項。
當元件使用混入物件時，所有混入物件的選項將被混入該元件本身的選項。
普通混入例子
<div id="app" v-cloak> <p @click="a">{{msg}}</p> <p>{{aaa}}</p> </div> <script> let common = { methods:{ a(){ console.log("a") } }, computed:{ aaa(){ return "我是計算屬性" } } } new Vue({ el:"#app", mixins:[common], data:{ msg:"hello world" } }) </script>
選項合併
當元件和混入物件含有同名選項時，這些選項將以恰當的方式混合。
同名鉤子函式將合併為一個數組，因此都將被呼叫。另外，混入物件的鉤子將在元件自身鉤子之前呼叫。
以下例項中，Vue 例項與混入物件包含了相同的方法。從輸出結果可以看出兩個選項合併了。
<body> <div id="app"></div> <script type="text/javascript"> var mixin = { created: function () { document.write('混入呼叫' + '<br>') } } new Vue({ el: "#app", mixins: [mixin], created: function () { document.write('元件呼叫' + '<br>') } }); </script> </body> 結果：混入呼叫 元件呼叫
如果 methods 選項中有相同的函式名，則 Vue 例項優先順序會較高。
<body> <div id="app"> <p><button @click="a">點選</button></p> </div> <script src="./base/vue.js"></script> <script> let common = { methods: { a(){ console.log("a") } } } new Vue({ el: "#app", mixins: [common], methods: { a(){ console.log("vue例項") } } }) </script> </body> 結果：vue例項
值為物件的選項，例如
methods、components和directives，將被合併為同一個物件。兩個物件鍵名衝突時，取元件物件的鍵值對。
<body>
<div id="app"></div>
<script type="text/javascript">
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
el:"#app",
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('from self')
}
}
})
vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"
</script>
</body>
全域性混入
混入也可以進行全域性註冊。使用時格外小心！一旦使用全域性混入，它將影響每一個之後建立的 Vue 例項。使用恰當時，這可以用來為自定義選項注入處理邏輯。
// 為自定義的選項 'myOption' 注入一個處理器。
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello!'
})
// => "hello!"