詳解vue之mixin的使用
更新時間：2021年11月25日 17:19:53 作者：不求人0
這篇文章主要為大家介紹了vue之mixin的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助
vue之mixin的使用
- 作用：在引入組件之后，則是將組件內部的內容如data等方法、method等屬性與父組件相應內容進行合并。相當于在引入后，父組件的各種屬性方法都被擴充了
- data數據的等訪問原則：若是使用mixin的當前組件有該 data數據 或者 methods方法的話 直接運用的是當前組件的數據或者方法，否則的話直接繼承mixin內部的數據與方法
- 注意點：可以定義共用的變量，在每個組件中使用，引入組件中之后，各個變量是相互獨立的，值的修改在組件中不會相互影響
- 注意點2：mixin是在引入組件之后與組件中的對象和方法進行合并，相當于擴展了父組件的data數據與方法等，可以理解為形成了一個新的組件
mixin之中的data數據訪問
mixin / index.js
export default {
data () {
return {
msg: "我是mixin內的msg"
}
},
created () {
},
mounted () { },
methods: {
}
}
Home.vue
- 在Home組件中使用mixin
<template>
<div>
<div>home -- {{ msg }}</div> /* home修改的msg */
</div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
name: "Home",
mixins: [mixin],
data() {
return { };
},
created() {
// 拿mixin的data數據
console.log("home打印一下", this.msg); //home打印一下 我是mixin內的msg
// 修改mixin的data數據
this.msg = "home修改的msg";
console.log("home打印一下", this.msg); // home打印一下 home修改的msg
},
methods: {
},
};
</script>
<style lang="scss" scoped>
</style>
About2.vue
<template>
<div>
<div>about2 -- {{ msg }}</div> /* about2修改的msg */
</div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
name: "About2",
mixins: [mixin],
components: {},
data() {
return {
msg: "本地的msg",
};
},
created() {
console.log("about2打印一下", this.msg); // 本地的msg
this.msg = "about2修改的msg";
console.log("about2打印一下", this.msg); // about2修改的msg
// 最后頁面 顯示的 about2修改的msg 這個數據
},
methods: {
},
};
</script>
<style lang="scss" scoped>
</style>
mixin中的 methods方法和computed使用
mixin / index.js
export default {
data () {
return {
msg: "我是mixin內的msg"
}
},
created () { },
mounted () { },
computed: {
UserName () {
return "我是計算屬性的UserName";
},
},
methods: {
tipMsg () {
console.log("minxin內的tipMsg方法", this.msg);
},
tipInfo (info) {
console.log("minxin內的tipInfo方法", info);
}
}
}
Home.vue
<template>
<div>
<div>home --- msg-{{ msg }} UserName-{{ UserName }}</div>
/* home --- msg-home修改的msg UserName-我是計算屬性的UserName */
</div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
name: "Home",
mixins: [mixin],
components: {},
data() {
return {};
},
created() {
// 拿mixin的data數據
console.log("home打印一下", this.msg); //home打印一下 我是mixin內的msg
// 修改mixin的data數據
this.msg = "home修改的msg";
console.log("home打印一下", this.msg); // home打印一下 home修改的msg
// 調用mixin中的 tipMsg 方法
this.tipMsg(); // minxin內的tipMsg方法 home修改的msg
this.tipInfo("我是home的菜雞info"); // minxin內的tipInfo方法 我是home的菜雞info
},
methods: {},
};
</script>
<style lang="scss" scoped>
</style>
About2.vue
<template>
<div>
<div>about2 -- {{ msg }} UserName-{{ UserName }}</div>
/* about2 -- about2修改的msg UserName-我是計算屬性的UserName */
</div>
</template>
<script>
import mixin from "@/mixin/index.js";
export default {
name: "About2",
mixins: [mixin],
components: {},
data() {
return {
msg: "本地的msg",
};
},
created() {
console.log("about2打印一下", this.msg); // 本地的msg
this.msg = "about2修改的msg";
console.log("about2打印一下", this.msg); // about2修改的msg
// 最后頁面 顯示的 about2修改的msg 這個數據
this.tipMsg(); // 最后打印 -> 我是about2本地的tipMsg方法
this.tipInfo(); // minxin內的tipInfo方法 undefined
},
methods: {
tipMsg() {
console.log("我是about2本地的tipMsg方法");
},
},
};
</script>
總結
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關注腳本之家的更多內容!
相關文章
在現(xiàn)代Web應用開發(fā)中,版本檢測與升級提示是提升用戶體驗的重要環(huán)節(jié),本文將詳細介紹如何在Vue應用中實現(xiàn)這一功能,有需要的小伙伴可以參考一下2025-04-04
這篇文章主要為大家介紹了Vue3設計思想及響應式源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
這篇文章主要介紹了Vue中如何點擊獲取當前元素下標問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue router-link 默認a標簽去除下劃線的實現(xiàn)
這篇文章主要介紹了vue router-link 默認a標簽去除下劃線的實現(xiàn)操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了vue Tab切換以及緩存頁面處理的幾種方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-11-11
今天小編就為大家分享一篇使用vue點擊li,獲取當前點擊li父輩元素的屬性值方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3+vite+ts使用require.context問題
這篇文章主要介紹了vue3+vite+ts使用require.context問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue百度地圖實現(xiàn)自定義彈框樣式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue3 新增的 Composition API中的 watchEffect 和 watch都可在 setup() 函數中使用，本文重點介紹vue3中watch與watchEffect的區(qū)別，感興趣的朋友一起看看吧2023-02-02
在Vue中，組件是構建頁面的基本單位。通過組件化開發(fā)，可以提高代碼的復用性和可維護性。組件的注冊方法包括全局注冊和局部注冊兩種方式。同時，需要注意組件名的命名規(guī)范、組件選項的定義方式、組件之間的通信等問題，以實現(xiàn)更好的組件復用和開發(fā)效率2023-05-05