快捷導(dǎo)航

vue 3.x 中mixin封裝公用方法應(yīng)用方式

更新時(shí)間：2022年05月31日 08:59:52 作者：采藥人~陳大仙

這篇文章主要介紹了vue 3.x 中mixin封裝公用方法應(yīng)用方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

mixin封裝公用方法應(yīng)用

在src下新建文件裝載公用方法：mixin/baseMixin.js

const baseMixin = {
?? ?data() {
?? ??? ?return {
?? ??? ??? ?title: '這個(gè)是公用標(biāo)題'
?? ??? ?}
?? ?},
?? ?methods: {
?? ??? ?onClick() {
?? ??? ??? ?console.log('我被點(diǎn)擊了')
?? ??? ?}
?? ?}
}
export default baseMixin;

然后可以在需要調(diào)用的組件中調(diào)用：src/view/App.vue

<template>
? <div class="baseMixin">
? ? <h1>
? ? ?? ?這個(gè)是調(diào)用復(fù)用標(biāo)題: {{title}}
? ? ?? ?// 渲染：這個(gè)是公用標(biāo)題
? ??? ?</h1>?
? ? <h2>
? ? ?? ?<button @click="onClick">
? ? ?? ??? ?// 打印：我被點(diǎn)擊了
? ? ?? ??? ?這個(gè)是復(fù)用方法
? ??? ??? ?</button>
? ? </h2>
? </div>
</template>

<script>
import baseMixin from '@/mixin/baseMixin'
?? ?export default {
?? ??? ?mixins: [baseMixin],
?? ??? ?setup() {
?? ??? ??? ?let text = '這個(gè)是vue3版本mixin的方法記錄'
?? ??? ??? ?return {
?? ??? ??? ??? ?text
?? ??? ??? ?}
?? ??? ?}
?? ?}
</script>

如果需要全局直接使用mixin的封裝的話，在main.js里面申明就可以

import { createApp } from 'vue'
import App from './App.vue'
import baseMixin from './mixin/baseMixin'
createApp(App).mixin(baseMixin).mount('#app')

vue3基礎(chǔ)-mixin使用

mixin特點(diǎn)

組件 data 優(yōu)先級高于 mixin 的data優(yōu)先級
組件 methods 優(yōu)先級高于 mixin 的methods優(yōu)先級
聲明周期函數(shù)，先執(zhí)行 mixin 里面的，再執(zhí)行組件里面的
局部mixin,需要在組件中注冊 mixins: [myMixin]
全局mixin 無需在組件中注冊，自動(dòng)注入。

定義局部mixin

和定義局部組件類似,支持data,methods以及聲明周期函數(shù)。

mixin.js

const myMixin = {
  data() {
    return {
      msg: 'hello vue3'
    }
  },
  created() {
    console.log('mixin created');
  },
  methods: {
    handleClick() {
      console.log('mixin', this.msg);
    }
  }
}

定義全局mixin（不推薦）

// 全局mixin 無需在組件中注冊，自動(dòng)注入。
app.mixin({
? mounted() {
? ? console.log('這是一個(gè)全局的mixin');
? }
})

調(diào)整mixin中屬性的優(yōu)先級

const myMixin = {
? msg: 'hello mixin ~'
}
// $options 組件注冊的所有選項(xiàng)都會(huì)在 $options 中
const app = Vue.createApp({
? mixins: [myMixin],
? msg: 'hello app ~',
? template: `
? ? <div>
? ? ? {{ $options.msg }} ?
? ? </div>`,
})
// ** 調(diào)整mixin中屬性(如：msg)的優(yōu)先級，使mixin的優(yōu)先級高級組件的
app.config.optionMergeStrategies.msg = (mixinValue, appValue) => {
? return mixinValue || appValue;
}

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: