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