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;
}

以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。 

点赞(0)

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部