本篇内容主要讲解“vue mixins代码如何复用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue mixins代码如何复用”吧!
场景：
1. 代码里有很多当前组件需要的纯函数,methods过多
<!-- 主文件 --><template> <button @click="clickHandle">button</button></template><script>export default { name: 'PageDemo', methods: { func1(){}, func2(){}, func3(){}, clickHandle(){ this.func1(); this.func2() this.func3() console.log('button clicked') } },}</script>如果当前组件不好拆分，就会出现很多函数，代码会显得不清晰。 我现在的处理方法是通过mixins混入，参照MVC思想，当前文件的的methods只写和模板直接引用的处理方法，其他的函数都通过混入方式引用。
// compose-demo.jsexport default { methods: { func1(){}, func2(){}, func3(){}, }}<template> <button @click="clickHandle">button</button></template><script>// 主文件import ComposeDemo from './compose-demo'export default { name: 'PageDemo', mixins: [ComposeDemo], methods: { clickHandle(){ this.func1(); this.func2() this.func3() console.log('button clicked') } },}</script>充分利用mixins还有很多优点。
2. 举个例子你有一个组件需要抛出两个数据，直接的v-model不适用。需要采用$emit方法
// 组件<template> <input v-model="a" @change="inputChangeHandle"/> <input v-model="b" @change="inputChangeHandle" /></template><script>export default { name: 'ComponentChild', props: { propA: { type: String }, propB: { type: String } }, data(){ return { a: this.propA, b: this.propB, } }, methods: { inputChangeHandle(){ this.$emit('update-data', {a:this.a, b:this.b}) } }}</script>// 调用方<template> <component-child :propA="query.a" :propB="query.b" @update-data="getData"/></template><script>import ComponentChild from './component-child.vue'export default { name: 'Page1', components: {ComponentChild}, data(){ return { query: { a: '默认数据a', b: '默认数据b' } } }, methods: { getData(payload) { const {a,b}=payload; this.query.a = a; this.query.b = b; } }}</script>如果你有多处地方需要用到ComponentChild组件，那每个调用地方都需要写一个方法来监听@update-data事件。
此时，可以这样改一下
// 纯函数，引入ComponentChild，并且声明getData方法// compose-component-child.js<script>import ComponentChild from './component-child.vue'</script>export default { components: {ComponentChild}, methods: { // 通常情况，复用的业务组件都会有同样的数据结构，都带有query.a和query.b。如果不一致，那直接在父组件重写该方法 getData(payload) { const {a,b}=payload; this.query.a = a; this.query.b = b; } }}// 调用方<template> <component-child :propA="query.a" :propB="query.b" @update-data="getData"/></template><script>import ComposeComponentChild from './compose-component-child.js'export default { name: 'Page1', mixins: [ComposeComponentChild] data(){ return { query: { a: '默认数据a', b: '默认数据b' } } }, methods: { }}</script>借鉴了Angular的依赖注入，Page不直接声明、引用Component,而是通过混入Compose直接使用。
Component组件，Compose引入Component并且注册Component(声明额外的方法)，Page调用组件混入Compose，就可以可以直接使用Component组件
3. 同理，可以通过这个方式复用很多data数据，避免模板化的声明
比如常用的表格需要一下数据
<script> import {defaultPageSize}from '@/setting' export default { data(){ return { tableList: [], pageSize: defaultPageSize, pageNo: 1, totalRecords: 0, } } }</script>以上数据都可以组装为一个compose-table.js文件混入到你要使用的地方，当然也可以通过在compose-table引用注册表格组件。
到此，相信大家对“vue mixins代码如何复用”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
