vue3和vue2中mixins的使用解析
更新時間：2022年05月31日 09:17:20 作者：Ponnenult
這篇文章主要介紹了vue3和vue2中mixins的使用解析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
前言
vue的mixins里面放公共的js方法，但是vue3之后使用方法還是有些改變，這里來羅列下他們的區(qū)別。
Vue2
1、封裝的mixin方法
export const homeSensors = {
mounted() {
this.$sensors.track('teacherHomePageview')
},
methods:{
abc(){
alert(1)
}
}
}2、具體頁面引用 abc.vue
import { homeSensors } from '@/mixins/sensorsMixin'export default {
mixins: [taskAssign],
}3、具體頁面使用 abc.vue
created() {
this.abc() //mixin里面的具體方法
}, vue3官方入口（個人建議，不要再mixin用setup）
一、封裝mixin里面具有setup
注意：
vue3的官方統(tǒng)計mixin方法有兩種，全局和具體組件使用，均沒有支持在mixin的js文件中使用setup, 在里面直接寫入setup階段，是不能直接獲取到的，如果我們想要用setup，需要換一種思路，引入js的思路
具體步驟
1、封裝方法 common.js
//setup中調用的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、頁面具體使用
// vue頁面中引入
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 (官方支持用法)
官方入口：點我
Mixin 提供了一種非常靈活的方式，來分發(fā) Vue 組件中的可復用功能。一個 mixin 對象可以包含任意組件選項。當組件使用 mixin 對象時，所有 mixin 對象的選項將被“混合”進入該組件本身的選項。
例子：
// 定義一個 mixin 對象
const myMixin = {
created() {
this.hello()
},
methods: {
hello() {
console.log('hello from mixin!')
}
}
}
// 定義一個使用此 mixin 對象的應用
const app = Vue.createApp({
mixins: [myMixin]
})
app.mount('#mixins-basic') // => "hello from mixin!"具體使用
1、封裝方法 common.js
//setup中調用的mixins方法
import { computed, ref } from 'vue'
export const common = {
mounted(){
alert('我是mounted的方法')
},
}2、頁面具體使用
import {common} from '../../../mixins/common'
mixins: [common],3、頁面效果：刷新以后
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue中this.$router和this.$route的區(qū)別及push()方法
這篇文章主要給大家介紹了關于Vue中this.$router和this.$route的區(qū)別及push()方法的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
本文介紹了vue.config.js中devServer的常見配置方式,包括基本配置、代理配置、熱模塊替換、靜態(tài)資源服務、HTTPS配置、多代理配置以及其他配置項,幫助開發(fā)者根據項目需求進行定制2025-01-01
閑話少說，我們進入今天的小小五分鐘學習時間，前面我們了解了vue的組件，我們本文主要是講解vue的動態(tài)組件和內置組件，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
這篇文章主要介紹了vue中的el-button樣式自定義方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
路由懶加載是一種優(yōu)化技術，用于延遲加載應用程序中的路由組件，它可以提高初始加載速度并減少資源消耗，特別適用于大型單頁應用，下面我們就來看看它的原理與使用吧2023-08-08
這篇文章主要介紹了vue如何根據數值判斷顏色問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
element-ui組件table實現自定義篩選功能的示例代碼
這篇文章主要介紹了element-ui組件table實現自定義篩選功能的示例代碼，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
這篇文章主要介紹了vue中getters的使用與四個map方法的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了vue中的錨點定位問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue.js框架路由使用方法實例詳解的相關資料,這里提供實例幫助大家學習理解這部分內容，需要的朋友可以參考下2017-08-08