Vue:mixin混入

1. 功能:可以把多个组件共用的配置提取成一个混入对象

2. 使用方式:

    第一步定义混合:

    ```

    {

        data(){....},

        methods:{....}

        ....

    }

    ```

//mixin.js

export const hunhe = {
	methods: {
		showName(){
			alert(this.name)
		}
	},
	mounted() {
		console.log('你好啊!')
	},
}
export const hunhe2 = {
	data() {
		return {
			x:100,
			y:200
		}
	},
}

    第二步使用混入:

    ​ 全局混入:```Vue.mixin(xxx)``

//全局引用
//miain.js中添加
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

    ​ 局部混入:```mixins:['xxx']  ```

//局部引入
//school.vue

<template>
	<div>
		<h2 @click="showName">学校名称:{{name}}</h2>
		<h2>学校地址:{{address}}</h2>
	</div>
</template>

<script>
	引入一个hunhe
	import {hunhe,hunhe2} from '../mixin'

	export default {
		name:'School',
		data() {
			return {
				name:'哈尔滨理工大学',
				address:'哈尔滨',
				x:666
			}
		},
		mixins:[hunhe,hunhe2],
	}
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值