vue + mixins 使用实例

mixins可写入的模块

mixins可写入组件export default 中的所有内容。data , methods , components , computed 和 钩子函数。这些内容会根据不同的规则融合到组件中。

data，methods和components

在组件中可以调用的data为本身的data和mixins中data的并集 , 如果data的键冲突，以组件本身的值为准；
methods和components同理

钩子函数

组件和minxins中的钩子函数都会被执行，mixins在组件之前。

例子

<template>
<div id="">
	<input v-model="msg"/>
</div>

</template>
<script>
	var mixin = {
		data(){
			return {
				msg:'mixins:msg',
				name:'mixins:name'
			}
		},
		methods: {
			hello() {
				console.log('mixin:hello')
			}
		},
		beforeCreated(){
			console.log("mixins:beforeCreated");
		},
		created() {
			console.log("mixins:created");
		},
		beforeMount(){
			console.log("mixins:beforeMount");
		},
		mounted(){
			console.log("mixins:mounted");
		},
		beforeUpdate(){
			console.log("mixins:beforeUpdate");
		},
		updated(){
			console.log("mixins:updated");
		},
		beforeDestory(){
			console.log("mixins:beforeDestory");
		},
		destoryed(){
			console.log("mixins:destoryed");
		}
		
	}
	export default {
		mixins: [mixin],
		data() {
			return {
				msg:'组件msg'
			}
		},
		methods: {
			hello() {
				console.log('组件：hello')
			}
		},
		beforeCreated(){
			console.log("组件:beforeCreated");
		},
		created() {
			console.log("组件:created");
		},
		beforeMount(){
			console.log("组件:beforeMount");
		},
		mounted(){
			console.log("组件:mounted");
			console.log(this.$data);
		},
		beforeUpdate(){
			console.log("组件:beforeUpdate");
		},
		updated(){
			console.log("组件:updated");
		},
		beforeDestory(){
			console.log("组件:beforeDestory");
		},
		destoryed(){
			console.log("组件:destoryed");
		}
	}
</script>