vue3和vue2中mixins的使用解析
更新時(shí)間：2022年05月31日 09:17:20 作者：Ponnenult
這篇文章主要介紹了vue3和vue2中mixins的使用解析，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
前言
vue的mixins里面放公共的js方法，但是vue3之后使用方法還是有些改變，這里來(lái)羅列下他們的區(qū)別。
Vue2
1、封裝的mixin方法
export const homeSensors = {
mounted() {
this.$sensors.track('teacherHomePageview')
},
methods:{
abc(){
alert(1)
}
}
}2、具體頁(yè)面引用 abc.vue
import { homeSensors } from '@/mixins/sensorsMixin'export default {
mixins: [taskAssign],
}3、具體頁(yè)面使用 abc.vue
created() {
this.abc() //mixin里面的具體方法
}, vue3官方入口（個(gè)人建議，不要再mixin用setup）
一、封裝mixin里面具有setup
注意：
vue3的官方統(tǒng)計(jì)mixin方法有兩種，全局和具體組件使用，均沒(méi)有支持在mixin的js文件中使用setup, 在里面直接寫(xiě)入setup階段，是不能直接獲取到的，如果我們想要用setup，需要換一種思路，引入js的思路
具體步驟
1、封裝方法 common.js
//setup中調(diào)用的mixins方法
import { computed, ref } from 'vue'
export const common = {
alertCon(content) {
if(content){
alert(content)
}else{
alert(1)
}
},
setup(){
const count = ref(1)
const plusOne = computed(() => count.value + 1)
function hello(){
console.log('hello mixin'+plusOne.value)
}
return{
count,
plusOne,
hello
}
}
}2、頁(yè)面具體使用
// vue頁(yè)面中引入
import {common} from '../../../mixins/common'
export default{
setup(){
common.alertCon()
const {count,plusOne,hello} = common.setup()
hello()
console.log(count.value, plusOne.value)
}
}二、不需要在mixin里面使用setup (官方支持用法)
官方入口：點(diǎn)我
Mixin 提供了一種非常靈活的方式，來(lái)分發(fā) Vue 組件中的可復(fù)用功能。一個(gè) mixin 對(duì)象可以包含任意組件選項(xiàng)。當(dāng)組件使用 mixin 對(duì)象時(shí)，所有 mixin 對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)。
例子：
// 定義一個(gè) mixin 對(duì)象
const myMixin = {
created() {
this.hello()
},
methods: {
hello() {
console.log('hello from mixin!')
}
}
}
// 定義一個(gè)使用此 mixin 對(duì)象的應(yīng)用
const app = Vue.createApp({
mixins: [myMixin]
})
app.mount('#mixins-basic') // => "hello from mixin!"具體使用
1、封裝方法 common.js
//setup中調(diào)用的mixins方法
import { computed, ref } from 'vue'
export const common = {
mounted(){
alert('我是mounted的方法')
},
}2、頁(yè)面具體使用
import {common} from '../../../mixins/common'
mixins: [common],3、頁(yè)面效果：刷新以后
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了electron踩坑之dialog中的callback解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
vue + gojs 實(shí)現(xiàn)拖拽流程圖效果
最近一段時(shí)間在研究go.js,它是一款前端開(kāi)發(fā)畫(huà)流程圖的一個(gè)插件，也是一個(gè)難點(diǎn)，要說(shuō)為什么是難點(diǎn)，首先，它是依賴畫(huà)布canvas知識(shí)開(kāi)發(fā)，這篇文章主要介紹了vue + gojs 實(shí)現(xiàn)拖拽流程圖,需要的朋友可以參考下2023-03-03
VUE?axios每次請(qǐng)求添加時(shí)間戳問(wèn)題
這篇文章主要介紹了VUE?axios每次請(qǐng)求添加時(shí)間戳問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
在for循環(huán)中生成的元素要加key屬性不僅是在Vue框架中是要添加的，在React框架中也是要添加的。但\其實(shí)都不是必須的，因?yàn)樵?Vue和React中不加key是不會(huì)報(bào)錯(cuò)的，只是會(huì)有警告。但是我們?cè)谏钊肓私饧觡ey的原因后會(huì)明白，若想確保沒(méi)有隱患的話，元素還是必須要加key屬性。2021-05-05
vue router中mode history、base的作用說(shuō)明
這篇文章主要介紹了vue router中mode history、base的作用說(shuō)明，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue報(bào)錯(cuò)error:0308010C:digital?envelope?routines::unsupported
這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)error:0308010C:digital?envelope?routines::unsupported的解決方法,文中通過(guò)圖文將解決的辦法介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)頁(yè)面的幾種常用方法,vue跳轉(zhuǎn)頁(yè)面有好幾種不同方法,文中通過(guò)代碼將實(shí)現(xiàn)的方法介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了如何將百度地圖包裝成Vue的組件的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了如何使用 Vue.js 和純 JavaScript 構(gòu)建 Bootstrap 組件,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Proxy是ES6引入的一個(gè)新特性，它允許你創(chuàng)建一個(gè)代理對(duì)象，用于攔截對(duì)目標(biāo)對(duì)象的訪問(wèn)，但用了這么久的vue3，你真的懂Proxy嗎，本文就來(lái)和大家深入聊聊Proxy吧2023-06-06