vue 3.x 中mixin封装公用方法应用

在src下新建文件装载公用方法：mixin/baseMixin.js

const baseMixin = {
	data() {
		return {
			title: '这个是公用标题'
		}
	},
	methods: {
		onClick() {
			console.log('我被点击了')
		}
	}
}

export default baseMixin;

然后可以在需要调用的组件中调用：src/view/App.vue

<template>
  <div class="baseMixin">
    <h1>
    	这个是调用复用标题: {{title}}
    	// 渲染：这个是公用标题
   	</h1> 
    <h2>
    	<button @click="onClick">
    		// 打印：我被点击了
    		这个是复用方法
   		</button>
    </h2>
  </div>
</template>
<script>
import baseMixin from '@/mixin/baseMixin'
	export default {
		mixins: [baseMixin],
		setup() {
			let text = '这个是vue3版本mixin的方法记录'
			return {
				text
			}
		}
	}
</script>

如果需要全局直接使用mixin的封装的话，在main.js里面申明就可以

import { createApp } from 'vue'
import App from './App.vue'
import baseMixin from './mixin/baseMixin'

createApp(App).mixin(baseMixin).mount('#app')