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項(xiàng)目中使用flow做類(lèi)型檢測(cè)的方法
這篇文章主要介紹了Vue項(xiàng)目中使用flow做類(lèi)型檢測(cè)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)動(dòng)態(tài)菜單
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)動(dòng)態(tài)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
詳解vuejs2.0 select 動(dòng)態(tài)綁定下拉框支持多選
這篇文章主要介紹了vuejs2.0 select動(dòng)態(tài)綁定下拉框 ，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
django中使用vue.js的要點(diǎn)總結(jié)
在本篇文章里小編給各位整理了關(guān)于django中使用vue.js需要注意的地方以及相關(guān)知識(shí)點(diǎn)，需要的朋友們跟著學(xué)習(xí)參考下。2019-07-07
computed是vue的配置選項(xiàng),它的值是一個(gè)對(duì)象,其中可定義多個(gè)計(jì)算屬性,每個(gè)計(jì)算屬性就是一個(gè)函數(shù),下面這篇文章主要給大家介紹了關(guān)于vue中計(jì)算屬性computed的詳細(xì)講解,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了vue 實(shí)例方法和數(shù)據(jù)的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值,需要的朋友可以參考下2017-10-10
本篇文章主要介紹了vue之頁(yè)面緩存問(wèn)題(基于2.0)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01
Vue?Router路由hash模式與history模式詳細(xì)介紹
Vue?Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成，讓構(gòu)建單頁(yè)面應(yīng)用變得易如反掌。路由實(shí)際上就是可以理解為指向，就是我在頁(yè)面上點(diǎn)擊一個(gè)按鈕需要跳轉(zhuǎn)到對(duì)應(yīng)的頁(yè)面，這就是路由跳轉(zhuǎn)2022-08-08
vue框架編輯接口頁(yè)面下拉級(jí)聯(lián)選擇并綁定接口所屬模塊
這篇文章主要為大家介紹了vue框架編輯接口頁(yè)面實(shí)現(xiàn)下拉級(jí)聯(lián)選擇以及綁定接口所屬模塊，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
vue3+webpack中npm發(fā)布組件的實(shí)現(xiàn)
本文主要介紹了vue3+webpack中npm發(fā)布組件的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01