vue3 全局引入 mixins方法并使用

景宇

已于 2023-02-08 09:50:26 修改

阅读量5.3k

点赞数 1

于 2021-12-23 15:22:55 首次发布

本文链接：https://blog.csdn.net/qq_16646819/article/details/122108587

版权

vue3 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

mixins

1 篇文章 0 订阅

订阅专栏

创建 mixin文件 mixins.js


const baseMixin = {
	data() {},
	methods: {
		btnClick() {
			console.log('点击事件触发');
		},
	},
};

export default baseMixin;

在入口文件 main.js 中引入

import mixin from "./mixins/index.js";

app.mixin(mixin)

页面中使用

<template>
    <div>

    </div>
</template>

<script>
   import { onMounted,onUnmounted, getCurrentInstance, ref,reactive,toRefs } from 'vue';
   import { useStore } from 'vuex';
   import { useRouter } from 'vue-router';
   export default {
       components: {
       },
       setup() {
           let store = useStore();
           let route = useRouter();
           let state = reactive({
                                 
           })
           const { proxy } = getCurrentInstance();
           onMounted(()=>{
                proxy.btnClick()
           })
           onUnmounted(()=>{
           
           })
           return {
               ...toRefs(state)
           }
       }
   };
</script>

<style scoped lang="less">

</style>