首頁 > web前端 > Vue.js > vue.js什麼是混入

vue.js什麼是混入

coldplay.xixi
發布: 2020-11-30 14:25:28
原創
2414 人瀏覽過

vue.js混入是定義了一部分可重複使用的方法或計算屬性,混入物件可以包含任意元件選項,當元件使用混入物件時,所有混入物件的選項都會被混入該元件本身的選項。

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: &#39;#databinding&#39;,
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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板