Vue3之Mixin的使用方式(全局,局部,setup內(nèi)部使用)
更新時(shí)間：2023年10月09日 09:20:31 作者：窗外鳥(niǎo)不停
這篇文章主要介紹了Vue3之Mixin的使用方式(全局,局部,setup內(nèi)部使用),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
Mixin 提供了一種非常靈活的方式，來(lái)分發(fā) Vue 組件中的可復(fù)用功能。
一個(gè) mixin 對(duì)象可以包含任意組件選項(xiàng)。
當(dāng)組件使用 mixin 對(duì)象時(shí)，所有 mixin 對(duì)象的選項(xiàng)將被“混合”進(jìn)入該組件本身的選項(xiàng)
1.查看了官方代碼
記錄下了自己的Mixin寫(xiě)法
2.新建一個(gè)文件夾用于minix
添加2方法用于混合器
3.在main中引用全局方法
4.在局部引用mixin
代碼：
<template>
<div>
<el-button @click="test1">全局的Minix</el-button>
<el-button @click="test2('使用了局部mixin')">局部的Minx</el-button>
<el-button @click="onTest">setup內(nèi)部使用</el-button>
</div>
</template>
<script>
import { getCurrentInstance } from 'vue'
import { common } from '../minix/index.js'
export default {
name: 'Test2',
mixins: [common],
setup() {
const { proxy } = getCurrentInstance()
const onTest = () => {
proxy.test2("setup內(nèi)部使用Minx")
}
return {
onTest
}
}
}
</script>測(cè)試效果成功
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要和大家一起深入探討Vue.js組件和組件通信的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-09-09
項(xiàng)目開(kāi)發(fā)中因?yàn)閡i設(shè)計(jì)常常需要修改vue常用的組件庫(kù)（element,antD等等）,這就需要用到樣式穿透,下面這篇文章主要給大家介紹了關(guān)于Vue3樣式滲透之deep()為什么無(wú)效的相關(guān)資料,需要的朋友可以參考下2022-11-11
解決運(yùn)行vue項(xiàng)目?jī)?nèi)存溢出問(wèn)題
這篇文章主要介紹了解決運(yùn)行vue項(xiàng)目?jī)?nèi)存溢出問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)分頁(yè)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
Vue中的echarts圖表如何實(shí)現(xiàn)loading效果
這篇文章主要介紹了Vue中的echarts圖表如何實(shí)現(xiàn)loading效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
vue 組件的封裝之基于axios的ajax請(qǐng)求方法
今天小編就為大家分享一篇vue 組件的封裝之基于axios的ajax請(qǐng)求方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
Vue如何實(shí)現(xiàn)將后端返回二進(jìn)制文件在瀏覽器自動(dòng)下載
Vue項(xiàng)目開(kāi)發(fā)中,遇到界面下載功能時(shí),前端如何實(shí)現(xiàn)將后端返回二進(jìn)制文件在瀏覽器自動(dòng)下載呢,本文就來(lái)和大家聊聊具體的解決方法吧2024-11-11
vue項(xiàng)目有時(shí)候需要根據(jù)頁(yè)面需要?jiǎng)討B(tài)的去修改頁(yè)面標(biāo)題名稱(chēng)，本文就來(lái)介紹一下，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-06-06
這篇文章主要介紹了vue2配置scss的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
解決vue項(xiàng)目中遇到 Cannot find module ‘chalk‘ 報(bào)錯(cuò)的問(wèn)題
這篇文章主要介紹了解決vue項(xiàng)目中遇到 Cannot find module ‘chalk‘ 報(bào)錯(cuò)的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11