- mixins的使用以及案列

功能描述

混入(mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

本例实现功能描述

本列子实现了用一个组件导入两个混入对象，并调用了两个混入对象的属性跟方法。

[!TIP|label: 定义mixinOne.js与mixinTwo.js文件]
在src/mixins文件下新建一个mixinOne.js与mixinTwo.js文件，分别添加以下代码

const mixinOne = {
  data() {
    return {
      // 属性1
      baidu: "http://www.baidu.com",
      // 属性2
      taobao: "http://www.taobao.com",
    }
  },
  methods: {
    getDataList() {
      console.log("--------mixinOneDataList------")
    },
    testOne() {
      console.log("--------mixinOne------")
    }
  }
}
export {mixinOne}

const mixinTwo = {
  data() {
    return {
      // 属性1
      alibaba: "http://www.alibaba.com",
      // 属性2
      tencent: "http://www.tencent.com",
    }
  },
  methods: {
    getDataList() {
      console.log("--------mixinTwoDataList------")
    },
    testTow() {
      console.log("--------mixinTwo------")
    }
  }
}
export {mixinTwo}

[!TIP|label: 定义homeInfo.vue]
我们以基础框架为基础，在src/views/basic/sys文件夹下新建一个homeInfo.vue文件并配置到菜单，
配置菜单的具体方法见vue方式开发指南-部署与启动里面的菜单路由配置
在src/views/basic/sys的homeInfo.vue里面添加一下代码

<template>
  <div>
    <button @click="consoleData()">打印属性</button>
    <button @click="getDataList()">getDataList会打印</button>
    <button @click="testOne()">mixinOne的方法testOne</button>
    <button @click="testTow()">mixinTwo的方法testTow</button>
  </div>
</template>
<script>
  import {mixinOne} from '@/mixins/mixinOne'
  import {mixinTwo} from '@/mixins/mixinTwo'
  export default {
    name: 'HomeVueInfo',
    data() {
      return {
      }
    },
    mixins: [mixinOne,mixinTwo],
    methods: {
      getDataList() {
        console.log("欢迎来到vue")
      },
      consoleData() {
        console.log(this.$data)
      }
    }
  }
</script>

[!TIP]
点击界面按钮可以看到混淆添加已经添加并成功触发，如图所示: