VUE?mixin?使用示例詳解
更新時間：2022年08月11日 09:07:00 作者：余生皆假期-
混入mixin提供了一種非常靈活的方式，來分發(fā)Vue組件中的可復(fù)用功能，一個混入對象可以包含任意組件選項，接下來通過本文給大家介紹VUE?mixin?使用,需要的朋友可以參考下
mixin 混入
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const MyMixin = {
data() {
return {
number: 2,
count: 3
}
}
}
const app = Vue.createApp({
data() {
return {
number: 1
}
},
mixins: [MyMixin],
template: `
<div>number:{
<!-- -->{number}}</div>
<div>count:{
<!-- -->{count}}</div>
`
});
app.mount('#root');
</script>
</html>mixin 混入可以在組件內(nèi)部缺少數(shù)據(jù)時，使用mixin內(nèi)的數(shù)據(jù)代替。
組件 data 優(yōu)先級高于 mixin data 優(yōu)先級
上述代碼中，count 使用了 mixin 內(nèi)的數(shù)據(jù)，由于內(nèi)部 number 已經(jīng)被定義，vue 優(yōu)先使用內(nèi)部的數(shù)據(jù)，再使用 mixin 的數(shù)據(jù)。
2 mixin 生命周期優(yōu)先級
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const MyMixin = {
created(){
console.log('mixin created')
}
}
const app = Vue.createApp({
mixins:[MyMixin],
created(){
console.log('app created')
}
});
app.mount('#root');
</script>
</html>mixin 中的生命周期函數(shù)和組件的生命周期函數(shù)都會執(zhí)行，而且 mixin 中的優(yōu)先級更高。
效果如下：
3 局部 mixin 和全局 mixin
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const MyMixin = {
data(){
return{
number:123
}
}
}
const app = Vue.createApp({
mixins:[MyMixin],
template:`<app/>`
});
app.component("app",{
template:"<div>number:{
<!-- -->{number}}</div>"
})
app.mount('#root');
</script>
</html>使用 mixins:[myMixin] 是局部載入mixin的方式，子組件不能獲得 mixins 的值
運行結(jié)果如下：
全局 mixin 寫法：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
template: `<app/>`
});
app.mixin({
data() {
return {
number: 123
}
}
})
app.component("app", {
template: "<div>number:{
<!-- -->{number}}</div>"
})
app.mount('#root');
</script>
</html>使用 app.mixin 掛載就是全局，組件可以自由使用。
效果如下：
4 自定義屬性的優(yōu)先級
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>hello world</title>
<script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const myMixin = {
value: 1
}
const app = Vue.createApp({
mixins: [myMixin],
value: 25,
template: `<div>{
<!-- -->{this.$options.value}}</div>`
});
app.mount('#root');
</script>
</html>vue 中，自定義屬性就是直接寫到vue下的屬性，使用 this.$options.value 即可訪問。
自定義屬性組件的優(yōu)先級比 mixin 優(yōu)先級高。
結(jié)果如下：
mixin總結(jié)：
組件 data，methods優(yōu)先級高于 mixin data，methods 優(yōu)先級
生命周期函數(shù)，先執(zhí)行 mixin 里邊的，再執(zhí)行組件里邊的
自定義的屬性，組件中的優(yōu)先級高于 mixin 屬性的優(yōu)先級。
到此這篇關(guān)于VUE mixin 使用的文章就介紹到這了,更多相關(guān)VUE mixin 使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在 Vue-CLI 中引入 simple-mock實現(xiàn)簡易的 API Mock 接口數(shù)據(jù)模擬
本文以 Vue-CLI 為例介紹引入 simple-mock 實現(xiàn)前端開發(fā)數(shù)據(jù)模擬的步驟。感興趣的朋友跟隨小編一起看看吧2018-11-11
這篇文章主要介紹了vue踩坑記錄之src的動態(tài)綁定賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
elementUI+Springboot實現(xiàn)導(dǎo)出excel功能的全過程
這篇文章主要介紹了elementUI+Springboot實現(xiàn)導(dǎo)出excel功能,現(xiàn)在也對這個導(dǎo)出功能進行一個匯總整理寫出來，結(jié)合實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
vue?跳轉(zhuǎn)頁面$router.resolve和$router.push案例詳解
這篇文章主要介紹了vue?跳轉(zhuǎn)頁面$router.resolve和$router.push案例詳解,這樣實現(xiàn)了既跳轉(zhuǎn)了新頁面,又不會讓后端檢測到頁面鏈接不安全之類的,需要的朋友可以參考下2023-10-10
Vue.js：使用Vue-Router 2實現(xiàn)路由功能介紹
本篇文章主要介紹了Vue.js：使用Vue-Router 2實現(xiàn)路由功能介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
vue-cli腳手架打包靜態(tài)資源請求出錯的原因與解決
這篇文章主要給大家介紹了關(guān)于vue-cli腳手架打包靜態(tài)資源請求出錯的原因與解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue-cli具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
這篇文章主要為大家詳細(xì)介紹了vue.js實現(xiàn)簡單計時器功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
如何配置vue.config.js 處理static文件夾下的靜態(tài)文件
這篇文章主要介紹了如何配置vue.config.js 處理static文件夾下的靜態(tài)文件，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue中JSON文件神奇應(yīng)用fetch、axios異步加載與模塊導(dǎo)入全指南詳細(xì)教程
在Vue中使用JSON文件有多種方式,包括使用fetch方法加載JSON文件、使用axios庫加載JSON文件,以及將JSON文件導(dǎo)入為模塊,這篇文章主要介紹了Vue中JSON文件神奇應(yīng)用fetch、axios異步加載與模塊導(dǎo)入全指南詳細(xì)教程,需要的朋友可以參考下2024-01-01
本文主要介紹了el-table表格排序(多列排序和遠(yuǎn)程排序)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05