Vue-multiselect デフォルトラベルを共通で変更する方法

# 概要
Vue.jsで開発するときによく使わせていただいている [Vue-multiselect](https://vue-multiselect.js.org/) というセレクトボックスのライブラリがあるのですが、
デフォルトのままで使うと
![vue-multiselect_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220144/756af5f8-6ae5-ca94-3571-481f48d9d0ad.png)
のように、プレースホルダーなどが英語で標準的に設定されてしまっている。
propsnに値を設定すると変えられるので問題はないのですが、複数箇所で使うとその設定を全部にするのが面倒。そして時々忘れてしまう。。。
そこで、ライブラリの表示などを初期設定したコンポーネントを作ればいいと思い、
実際に実装したときのメモ。

# 環境
* Vue.js 2.6.10
* Vue-multiselect 2.1.4

# ライブラリ導入
以下のコマンドでインストールできる

```
npm install vue-multiselect --save
```
使い方はこんな感じ

```vuejs
<template>
  <div id="app">
    <h1>Vue-multiselect</h1>
    <multiselect v-model="value" :options="options"></multiselect>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";
import "vue-multiselect/dist/vue-multiselect.min.css";

export default {
  name: "app",
  components: {
    Multiselect
  },
  data() {
    return {
      value: undefined,
      options: ["data1", "data2", "data3"]
    };
  }
};
</script>

<style>
</style>
```

このままだと、最初の画像のようにプレースホルダーやらが英語のまま出てきてしまう。
Propsで変更できるのだが、使うところ全部で設定するのは面倒。。。

# ラベル設定共通化（コンポーネント化）
以下のようなコンポーネントを作って、そのコンポーネントをアプリ内で使うようにすればよい。

```vuejs:customSelect.vue
<template>
  <div>
    <multiselect
      :options="options"
      v-model="selected"
      :multiple="multiple"
      :disabled="disabled"
      :placeholder="_settings.placeholder"
      :selectLabel="_settings.selectLabel"
      :deselectLabel="_settings.deselectLabel"
      :selectedLabel="_settings.selectedLabel"
      @select="select"
      @remove="remove"
    >
      <template slot="noResult">
        <span>{{ _settings.noDataLabel }}</span>
      </template>
      <template slot="noOptions">
        <span>{{ _settings.noDataLabel }}</span>
      </template>
    </multiselect>
  </div>
</template>

<script>
// Library import
import multiselect from "vue-multiselect";
import "vue-multiselect/dist/vue-multiselect.min.css";
const defaultSettings = {
  placeholder: "",
  selectLabel: "",
  deselectLabel: "",
  selectedLabel: "",
  noDataLabel: "対象データがありません"
};

export default {
  props: {
    value: {
      type: null
    },
    options: {
      type: Array,
      default: () => []
    },
    multiple: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    settings: {
      type: Object,
      default: undefined
    }
  },
  components: {
    multiselect
  },
  data() {
    return {
      _settings: undefined
    };
  },
  created() {
    this._settings = Object.assign({}, defaultSettings, this.settings);
  },
  computed: {
    selected: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      }
    }
  },
  methods: {
    select(selectedOption, id) {
      this.$emit("select", selectedOption, id);
    },
    remove(selectedOption, id) {
      this.$emit("remove", selectedOption, id);
    }
  }
};
</script>

<style>
</style>
```

上記のコンポーネントを呼び出すようにすると、
![vue-multiselect_2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/220144/74bcd279-a4f5-26cb-15cc-b610028af4be.png)
プレースホルダーのラベルなどがコンポーネントの設定になっている。

このようにしておくと、propsで設定を渡すことで、
呼び出す箇所によってプレースホルダーのラベルを変えられたりなどもできる。

# まとめ
部品をコンポーネント化して使うっていうのは、Vue.jsの実装でわりと基本的なことかもしれないが、
必ず使う場面が出てくると思うので、覚えておいて損はないと思う。

あと、このライブラリ（ [Vue-multiselect](https://vue-multiselect.js.org/) ）は使いやすく機能も豊富なので、おすすめです。