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

所需工具:

JavaScript

聪明的大脑

勤劳的双手

 

注意:本站只提供教程,不提供任何成品+工具+软件链接,仅限用于学习和研究,禁止商业用途,未经允许禁止转载/分享等

 

介绍

mixin封装公用方法应用
vue3基础-mixin使用
mixin特点
定义局部mixin
定义全局mixin(不推荐)
调整mixin中属性的优先级

 

教程如下

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>

 


 	<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;" />

如果需要全局直接使用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;
 	}

标签

发表评论