Vue混入與插件的使用介紹
更新時間：2022年09月08日 11:28:02 作者：月光曬了很涼快
這篇文章主要介紹了Vue混入與插件的使用，mixins（混入），官方的描述是一種分發(fā) Vue 組件中可復用功能的非常靈活的方式，mixins是一個js對象，它可以包含我們組件中script項中的任意功能選項，如data、components、methods 、created、computed等等
1. 混入
概述：
混入(mixins)是一種分發(fā)Vue組件中可復用功能的非常靈活的方式?；烊雽ο罂梢园我饨M件選項。當組件使用混入對象時，所有混入對象的選項將被混入該組件本身的選項。
簡單來說，混入用于公共代碼復用。
混入分為：全局和局部。
混入的執(zhí)行順序：
<div id="app">
<h3>{{name}}</h3>
<hr>
<h3>{{showName}}</h3>
<hr>
<div>{{run()}}</div>
</div>
<script>
// 混入：用于公共代碼復用
// 方式 全局 局部
Vue.mixin({
// data混入
data() {
return {
name: '張三 -- 全局'
}
},
// 計算屬性混入
computed: {
showName() {
return 'abc -- 全局'
}
},
methods: {
run() {
return 'run -- 全局'
}
},
// 生命周期方法混入
created() {
console.log('created -- 全局');
}
})
// 局部混入
const mix = {
data() {
return {
name: '張三 -- 局部'
}
},
computed: {
showName() {
return 'abc -- 局部'
}
},
methods: {
run() {
return 'run -- 局部'
}
},
created() {
console.log('created -- 局部');
}
}
const vm = new Vue({
el: '#app',
data: {
// name: '張三 -- 實例'
},
// 局部混入調用,可以調用 n 個
mixins: [mix],
methods: {
run() {
return 'run -- 實例'
}
},
created() {
console.log('created -- 實例');
}
})
</script>
注意：
- 混入的配置，可以把幾乎所有new Vue配置中的所有配置都能混入，但是el配置它不可以混入
- data配置，在混入方式中，只能寫函數的方式，且函數一定要返回一個對象，混入可能被調用多次，如果直接是對象的話，就會有污染(調用多次,引用地址卻不變,實例之間調用時不會互相影響)
- data混入的優(yōu)先級(對象屬性) 組件(實例) > 局部 > 全局 => 只會調用一個
- 生命周期方法，執(zhí)行順序 全局 -> 局部 --> 組件(實例) 依次執(zhí)行
- 方法依次執(zhí)行,屬性對應的配置只執(zhí)行一次,data是例外
2. 插件
概述：
在vue中提供插件機制，可以通過它的要求來完成插件的封裝，運用到項目中
語法：
Vue.use(函數|類|對象,[可選參數])
// 函數
// 函數名稱 plugin 可以更換
function plugin(Vue類,options可選參數){}
// 類
class Plugin {
// 必須是靜態(tài)方法，且名稱必須為install
static install(Vue類,options可選參數){}
}
// 調用靜態(tài)屬性：Plugin.install(Vue類,options可選參數)
// 對象
const obj = {
// 屬性名稱必須為 install
install(Vue類,options可選參數){}
}案例：
<div id="app">
<h3 v-red>{{title}}</h3>
</div>
<script>
// 它是就一個模塊
function plugin(Vue, options) {
console.log(options);
// 這是一個指令
Vue.directive('red', el => {
el.style.cssText = 'color:red'
})
// 這是混入
Vue.mixin({
data() {
return {
title: `() => console.log('run');`
}
},
// 這是生命周期方法
created() {
this.title = options.title
console.log('混入了');
}
})
// 靜態(tài)屬性
Vue.run = () => console.log('run');
// 添加成員屬性
Vue.prototype.play = () => console.log('play');
}
// 插入插件,可以插入參數
Vue.use(plugin, { title: 'abc' })
const vm = new Vue({
el: '#app',
data: {
},
created() {
Vue.run()
this.play()
}
})
</script>
插件封裝成類：
<div id="app">
<h3 v-red>{{title}}</h3>
</div>
<script>
class Plugin {
// 它是就一個模塊
static install(Vue, options) {
console.log(options);
Vue.directive('red', el => {
el.style.cssText = 'color:red'
})
Vue.mixin({
data() {
return {
title: `() => console.log('run');`
}
},
created() {
this.title = options.title
console.log('混入了');
}
})
// 添加成員屬性
Vue.prototype.run = () => console.log('run');
}
}
// 插入插件
Vue.use(Plugin, { title: 'abc' })
const vm = new Vue({
el: '#app',
data: {
},
created() {
this.run()
}
})
</script>插件封裝成對象：
<div id="app">
<h3 v-red>{{title}}</h3>
</div>
<script>
const Plugin = {
install(Vue, options) {
console.log(options);
Vue.directive('red', el => {
el.style.cssText = 'color:red'
})
Vue.mixin({
data() {
return {
title: `() => console.log('run');`
}
},
created() {
this.title = options.title
console.log('混入了');
}
})
// 添加成員屬性
Vue.prototype.run = () => console.log('run');
}
}
// 插入插件
Vue.use(Plugin, { title: 'abc' })
const vm = new Vue({
el: '#app',
data: {
},
created() {
this.run()
}
})
</script>到此這篇關于Vue混入與插件的使用介紹的文章就介紹到這了,更多相關Vue混入與插件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要給大家介紹了關于Vue3中emits與attrs區(qū)別的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2021-10-10
crypto-js對稱加密解密的使用方式詳解(vue與java端)
這篇文章主要介紹了如何在Vue前端和Java后端使用crypto-js庫進行AES加密和解密,前端通過創(chuàng)建AES.js文件來實現(xiàn)加密解密功能,并在Vue文件或JavaScript中使用,后端則可以直接使用Java代碼進行AES加密和解密操作,需要的朋友可以參考下2025-01-01
今天小編就為大家分享一篇vue 使用鼠標滾動加載數據的例子，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
為了方便大家寫代碼，Vue給大家提供了很多方便的修飾符，比如我們經常用到的取消冒泡，阻止默認事件等等，這篇文章將給大家分享Vue?中的常用的修飾符2022-10-10
vite是一個由vue作者尤雨溪專門為vue打造的開發(fā)利器,其目的是使 vue項目的開發(fā)更加簡單和快速,下面這篇文章主要給大家介紹了關于如何在Vue3+Vite中使用JSX的相關資料,需要的朋友可以參考下2023-02-02
本篇文章主要介紹了vue 運用mock數據的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了vue-router實現(xiàn)原理及兩種模式分析,給大家介紹了vue-router hash模式與history模式不同模式下處理邏輯，需要的朋友可以參考下2020-02-02
這篇文章主要為大家詳細介紹了vue實現(xiàn)移動端原生小球滑塊，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
ElementUI中el-table設置指定列固定不動,不受滾動條影響,下面這篇文章主要給大家介紹了關于el-table?fixed固定列導致錯位的解決方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了在vant中如何使用dialog彈窗，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05