溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
vue中mixins如何使用，針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。
一、定義公共的mixins文件：如mixin.vue
<template></template><script>export default {name: 'mixins-test-main',components: {},props: {},data () {return {mixinData: 'mixin中的變量'}},methods: {mixinFunction () {return '我是mixins里面的公共方法'},},mounted () {},computed: {}}</script><style scoped></style>
二、在你頁面內調用：需要import這個mixins文件 ，然后通過mixins:['文件名']來使用就可以了
<template><div><div @click="handleMixin">調用mixin方法</div></div></template><script>import MixinItem from './mixin'export default {name: 'mixin-test-comp',props: {},mixins: [MixinItem],components: {},data () {return {}},methods: {handleMixin () {console.log('mixin-data=========', this.mixinData)let mixfun = this.mixinFunction()console.log('mixin-fun====>>>', mixfun)},},mounted () {},computed: {}}</script><style scoped></style>
三、下面來說說mixins的特點：
1、方法和參數在各組件中不共享
比如混入對象中有一個 cont:1 的變量,在組件A中改變cont值為5，這時候在組件B中獲取這個值，拿到的還是1，還是混入對象里的初始值，數據不共享
2、值為對象的選項，如methods,components等，選項會被合并，鍵沖突的組件會覆蓋混入對象的，比如混入對象里有個方法A，組件里也有方法A，這時候在組件里調用的話，執行的是組件里的A方法
3、值為函數的選項，如created,mounted等，就會被合并調用，混合對象里的鉤子函數在組件里的鉤子函數之前調用，同一個鉤子函數里，會先執行混入對象的東西，再執行本組件的
四、與vuex的區別
vuex：用來做狀態管理的，里面定義的變量在每個組件中均可以使用和修改，在任一組件中修改此變量的值之后，其他組件中此變量的值也會隨之修改。
Mixins：可以定義共用的變量，在每個組件中使用，引入組件中之后，各個變量是相互獨立的，值的修改在組件中不會相互影響。
五、與公共組件的區別
組件：在父組件中引入組件，相當于在父組件中給出一片獨立的空間供子組件使用，然后根據props來傳值，但本質上兩者是相對獨立的。
Mixins：則是在引入組件之后與組件中的對象和方法進行合并，相當于擴展了父組件的對象與方法，可以理解為形成了一個新的組件。
關于vue中mixins如何使用問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
