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