Vue组件公用方法提取【mixin】

原创已于 2022-03-22 11:26:52 修改 · 1.8k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #vue

于 2022-03-19 22:12:33 首次发布

Vue 专栏收录该内容

33 篇文章

订阅专栏

本文介绍了在Vue.js中使用Mixin来抽取并复用组件间的共用属性和方法。首先，创建一个名为common.js的文件，包含数据、方法和生命周期钩子。然后，在组件中通过import引入并使用mixins属性将组件与共用方法合并。当存在命名冲突时，组件内的属性和方法优先级高于Mixin。同时，注意到全局共用方法可以通过在main.js中使用Vue.mixin注册。

一.应用场景

多个组件共用一个方法时可以用 mixin 抽取到一个js文件中，作为共用方法

二.实现方法

1.提取js共用方法文件

在这里插入图片描述

export const common = {
	
	// 组件共用属性 ----------------------------------
	data() {
		return {
			age: 18			        // 设置一个共用属性
		}
	},
	// ---------------------------------------------
	
	// 组件共用方法 ---------------------------------------------
	methods: {
		showName() {
			alert(this.name)  		// 弹出组件中name属性的共用方法
		}
	},
	// --------------------------------------------------------
	
	// 组件挂载时的共用方法 ----------------------
	mounted() {
		console.log('初始化方法')    // 挂载时调用
	},
	// ----------------------------------------
	
}

2.引入

<template>
	<div>
		<div>组件</div>
		<button @click="showName">弹出姓名</button>
	</div>
</template>

<script>

	// 引入js文件中的方法对象 --------------------
	import {common, } from '../pub_js/common.js'
	// ----------------------------------------
	
	export default {
		name: 'Student',
		data() {
			return {
				name: '张三'
			}
		},
		
		// 调用 mixin 将组件js与共用js合并 ---
		mixins: [common, ],
		// --------------------------------
		
	}
</script>

三.注意事项

1.data中的属性合并后，如果有命名冲突的情况，以组件中的属性为主，【组件属性覆盖共用js中的属性】
2.methods中的方法合并后，如果有命名冲突的情况，以组件中的方法为主，【组件方法覆盖共用js中的方法】
3.mounted等生命周期方法合并后，会先调用共用js中的的生命周期函数，再调用组件中的生命周期函数，【不会进行覆盖】
4.如果是全局共用的方法，可以直挂载到main.js中↓

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 挂载全局共用方法 -----------------------
import {common, } from 'pub_js/common.js'
Vue.mixin(common)
// --------------------------------------

new Vue({
  render: h => h(App),
}).$mount('#app')