vue.js什麼是混入
- coldplay.xixi原創
- 2020-11-11 10:30:182392瀏覽
vue.js混入是定義了一部分可重複使用的方法或計算屬性，混入物件可以包含任意元件選項，當元件使用混入物件時，所有混入物件的選項都會被混入該元件本身的選項。
本教學操作環境：windows10系統、vue2.4.2，本文適用於所有品牌的電腦。
【相關文章推薦：vue.js】
#混入 (mixins)定義了一部分可重複使用的方法或計算屬性。混入物件可以包含任意組件選項。當組件使用混入物件時，所有混入物件的選項將被混入該元件本身的選項。
來看一個簡單的實例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id = "databinding"></div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
},
methods : {
},
});
// 定义一个混入对象
var myMixin = {
created: function () {
this.startmixin()
},
methods: {
startmixin: function () {
document.write("欢迎来到混入实例");
}
}
};
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component();
</script>
</body>
</html>選項合併：
當元件和混入物件含有同名選項時，這些選項將以恰當的方式混合。
例如，資料物件在內部會進行遞迴合併，在和元件的資料發生衝突時以元件資料優先。
注意點：
（1）就是混入物件中你設定了個data屬性，裡面各種屬性值， 元件裡也有個data屬性，那麼混入物件和元件物件的data值會進行合併，重名的以組件資料有限；
（2）同名鉤子函數，都會被調用，而且混入物件的鉤子在組件自身鉤子之前調用；
全域混入
格式為：
Vue.mixin({ // 混入函数 })注意！慎用，一旦使用全域混入對象，會影響到所有之後所建立的Vue實例。使用恰當時，可以為自訂物件注入處理邏輯。
#相關免費學習推薦：JavaScript（影片）
以上是vue.js什麼是混入的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：vue.怎麼綁定屬性下一篇：vue.怎麼綁定屬性