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')
vue3基础-mixin使用
mixin特点
- 组件 data 优先级 高于 mixin 的data优先级
- 组件 methods 优先级 高于 mixin 的methods优先级
- 声明周期函数,先执行 mixin 里面的,再执行组件里面的
- 局部mixin,需要在组件中注册 mixins: [myMixin]
- 全局mixin 无需在组件中注册,自动注入。
定义局部mixin
和定义局部组件类似,支持data,methods以及声明周期函数。
mixin.js
const myMixin = { data() { return { msg: 'hello vue3' } }, created() { console.log('mixin created'); }, methods: { handleClick() { console.log('mixin', this.msg); } } }
定义全局mixin(不推荐)
// 全局mixin 无需在组件中注册,自动注入。 app.mixin({ mounted() { console.log('这是一个全局的mixin'); } })
调整mixin中属性的优先级
const myMixin = { msg: 'hello mixin ~' } // $options 组件注册的所有选项都会在 $options 中 const app = Vue.createApp({ mixins: [myMixin], msg: 'hello app ~', template: ` <div> {{ $options.msg }} </div>`, }) // ** 调整mixin中属性(如:msg)的优先级,使mixin的优先级高级组件的 app.config.optionMergeStrategies.msg = (mixinValue, appValue) => { return mixinValue || appValue; }
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。