vue mixins使用示例

混入 (mixins)： 是一种分发 Vue 组件中可以复用功能灵活的方式。混入对象可以包含任意组件的选项。当组件使用混入对象的时候，所有混入对象的选项将被混入该组件本身的选项。
使用示例:
定义使用的mixins对象

export const HelloWorldMixin = {
  data() {
    return {
      count: 0,
    };
  },
  created() {
    console.log("created");
  },
  methods: {
    changeMsg() {
      this.count++;
    },
  },
};

引入使用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="changeMsg">Change Message</button> {{ count }}
  </div>
</template>

<script>
import { HelloWorldMixin } from '@/minxins/HelloWorld.js'

export default {
  mixins: [HelloWorldMixin],
  name: 'HelloWorld',
  props: {
    msg: String
  },
  // data() {
  //   return {
  //     count: 0,
  //   };
  // },
  // methods: {
  //   changeMsg() {
  //     this.count++;
  //   },
  // },
}
</script>
<style scoped>
</style>

简单说就是将 data, methos 等直接拆分到 HelloWorldMixin.js中

文件目录

效果:

使用minxins和当前 vue中 data,methods 效果是一样的,
在单个文件vue内容代码量很大的时候, 进行提取meghods等, 只保留 样式,css
翻阅查找还是更方便些