vue mixins之学习系列

什么是mixins

mixins是一种分发Vue组件中可复用功能的一种灵活方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项

如何应用mixins

1. 定义一个混入对象

// mixin.js
export const myMixin = {
   
	data () {
   
		return {
   
			num: 1
		}
	},
	created () {
   
		this.getList();
	},
	methods: {
   
		getList () {
   
			console.log('hello form mixin')
		}
	}
}

2. 然后，把混入对象混入到当前的组件中

<template>
	<div class="container">
		组件1
	</div>
</template>

<script>
	import {
   myMixin} from '@/assets/mixin.js';
	export default {
   
		mixins: [myMixin]
	}
</script>

mixins特点

方法和参数在各组件中不共享
如混入对象中有一个count :1的变量，在组件A中改变count:5,这时候在组件B中获取值，拿到的还是1，仍然是混入对象里的初始值，数据不共享

值为参数的选项

组件1中的参数num进行+1操作

<template>
	<div class="container">
		组件1中的num: {
   {
   num}}
	</div>
</template>

<script>
	import