Vue 的 mixin 快速指南

  1. Vue 的 mixin 快速指南

Vue 的 mixin 快速指南

建立 component 共用程式碼

無法共用資料

mixin.js

建立要 mixin 的 .js 檔，並且在裡面直接放入 component 的共用 js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export const fruitMixin = {
  data() {
    return {
      fruits: ["Apple", "Banna", "Mango", "Melon"],
      filterText: ""
    };
  },
  computed: {
    filterFruits() {
      return this.fruits.filter(element => {
        return element.match(this.filterText);
      });
    }
  }
};

components/myComponent

在 component 加入 mixin

1
2
3
4
5
import { fruitMixin } from "./mixin.js";

export default {
  mixins: [fruitMixin]
};
發表於 
tags:
  • { vue }
  • { mixin }