🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
> 混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。 > 来自vuejs的混入,参考文档:[https://cn.vuejs.org/v2/guide/mixins.html](https://cn.vuejs.org/v2/guide/mixins.html) > 混入文件里的命令需要注意,尽量定义特殊的名字,防止与客户端的其他方法或者变量冲突 * [创建混入文件 mymix.js](https://www.kancloud.cn/wangking/uniapp/1949314#_mymixjs_5) * [局部混入](https://www.kancloud.cn/wangking/uniapp/1949314#_20) * [全局混入](https://www.kancloud.cn/wangking/uniapp/1949314#_43) ### 创建混入文件 mymix.js ~~~ export default { data() { return { name: 'wk' } }, methods:{ myclick(){ console.log('xxx2233') } } } ~~~ ### 局部混入 ~~~ <template> <view> <view>{{name}}</view> <button type="default" @click="myclick2">btn1</button> <button type="default" @click="myclick">btn2</button> </view> </template> <script> import myMix from '../../api/mymix.js'; export default { mixins:[myMix], methods:{ myclick2(){ console.log('sss') } } } </script> ~~~ ### 全局混入 > 修改根目录下的 main.js,加入以下代码 ~~~ import myMix from './api/mymix.js'; Vue.mixin(myMix) ~~~