【JavaScript教程】vue 3.x 中mixin封装公用方法如何应用方式详解

所需工具：

JavaScript

聪明的大脑文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12252.html

勤劳的双手文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12252.html

 文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12252.html

注意：本站只提供教程，不提供任何成品+工具+软件链接，仅限用于学习和研究，禁止商业用途，未经允许禁止转载/分享等文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12252.html

 文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12252.html

介绍

mixin封装公用方法应用
vue3基础-mixin使用
mixin特点
定义局部mixin
定义全局mixin（不推荐）
调整mixin中属性的优先级文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12252.html

 文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12252.html

教程如下

mixin封装公用方法应用

在src下新建文件装载公用方法：mixin/baseMixin.js文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12252.html

[php]文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12252.html

const baseMixin = {
data() {
return {
title: '这个是公用标题'
}
},
methods: {
onClick() {
console.log('我被点击了')
}
}
}
export default baseMixin;文章源自灵鲨社区-https://www.0s52.com/bcjc/javascriptjc/12252.html

[/php]

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

[php]

<template>
<div class="baseMixin">
<h1>
这个是调用复用标题: {{title}}
// 渲染：这个是公用标题
</h1>
<h2>
<button @click="onClick">
// 打印：我被点击了
这个是复用方法
</button>
</h2>
</div>
</template>

[/php]

[php]

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%09import%20baseMixin%20from%20'%40%2Fmixin%2FbaseMixin'%0A%20%09%20%20%20%20%20export%20default%20%7B%0A%20%09%20%20%20%20%20mixins%3A%20%5BbaseMixin%5D%2C%0A%20%09%20%20%20%20%20setup()%20%7B%0A%20%09%20%20%20%20%20let%20text%20%3D%20'%E8%BF%99%E4%B8%AA%E6%98%AFvue3%E7%89%88%E6%9C%ACmixin%E7%9A%84%E6%96%B9%E6%B3%95%E8%AE%B0%E5%BD%95'%0A%20%09%20%20%20%20%20return%20%7B%0A%20%09%20%20%20%20%20text%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%7D%0A%20%09%20%20%20%20%20%7D%0A%20%09%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />

[/php]

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

[php]

import { createApp } from 'vue'
import App from './App.vue'
import baseMixin from './mixin/baseMixin'
createApp(App).mixin(baseMixin).mount('#app')

[/php]

vue3基础-mixin使用

mixin特点

组件 data 优先级 高于 mixin 的data优先级
组件 methods 优先级 高于 mixin 的methods优先级
声明周期函数，先执行 mixin 里面的，再执行组件里面的
局部mixin,需要在组件中注册 mixins: [myMixin]
全局mixin 无需在组件中注册，自动注入。

定义局部mixin

和定义局部组件类似,支持data,methods以及声明周期函数。

mixin.js

[php]

const myMixin = {
data() {
return {
msg: 'hello vue3'
}
},
created() {
console.log('mixin created');
},
methods: {
handleClick() {
console.log('mixin', this.msg);
}
}
}

[/php]

定义全局mixin（不推荐）

[php]

// 全局mixin 无需在组件中注册，自动注入。
app.mixin({
mounted() {
console.log('这是一个全局的mixin');
}
})

[/php]

调整mixin中属性的优先级

[php]

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

[/php]