vue提供的混入对象mixin,类似于一个公共的组件,其他任何组件都可以使用它.我更经常的是把它当成一个公共方法来使用
在项目中有些多次使用的data数据,method方法,或者自定义的vue指令都可以放到mixin中,引入到各自的组件就可以使用,非常方便.这里写一下局部的混入组件使用,不建议在项目中使用全局混入..
首先写一个mixin.js文件,可以放在common公共组件中
src/components/common/mixin.js
// 你可以定义多个mixin对象,在里面就和普通的组件一样,定义data,method export const mymixin = { data() { return { msg: 'hello word, from mymixin' } }, // 自定义指令 directives: { focus: { inserted: function (el) { el.focus() } } }, methods: { // 处理图片方法 handleImg (url) { if (url && url.indexOf('.jpg') > -1) { return url } else return 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1840587501,62677872&fm=27&gp=0.jpg' } } }
在组件中引入使用,在混入对象中定义的data,method会被合并到当前组件中,可以直接使用混入对象里的data
<template> <div> mixintest <h2>{{msg}}</h2> 调用mixin方法:<img :src="handleImg('http://pic.58pic.com/58pic/15/17/01/47U58PICVQJ_1024.png')" alt=""> <h4>自动获取焦点</h4> <input type="text" v-focus> </div> </template> <script> import {mymixin} from './common/mixin' export default { name: 'mymixin', mixins: [mymixin], components: { }, data() { return { } }, methods: { } } </script> <style scoped> </style>
使用效果:
如果引入组件定义的数据和混入对象的名称重复,组件的数据会覆盖混入对象的属性
<template> <div> mixintest <h2>{{msg}}</h2> 调用mixin方法:<img :src="handleImg('http://pic.58pic.com/58pic/15/17/01/47U58PICVQJ_1024.jpeg')" alt=""> <h4>自动获取焦点</h4> <input type="text" v-focus> </div> </template> <script> import {mymixin} from './common/mixin' export default { name: 'mymixin', mixins: [mymixin], components: { }, data() { return { msg: '自己组件的数据' } }, methods: { } } </script> <style scoped> </style>
![](https://i-blog.csdnimg.cn/blog_migrate/46fc96d6dcc4d9afeb421b7e9a3aa34d.png)