Vue component的v-model

承繼上一篇，我們在撰寫component時，除了要接value，如果data改變，同時也要emit出去，所以程式碼就會如下

export default {

  props: ["value"],

  data: () => ({

    data: ""

  }),

  watch: {

    data() {

      this.$emit("input", this.data);

    },

    value: {

      immediate: true,

      handler() {

        this.data = this.value;

      }

    }

  }

};

乍看之下也沒什麼問題，小編也這樣寫了好幾年了，但小編一直對於宣告一個data:""感到不是很舒服，雖然只是個過水變數，但沒有更乾淨的寫法嗎？還有小編其實一直對於watch很感冒，watch用得好可以帶你上天堂，用不好你就好幾天不用下班，甚至忙到你小孩覺得你只是個很有趣的叔叔！所以能不用就不要用，因此這幾天在賺國產車時想到一個妙招，可以使用computed的set阿！！直接超級簡化，我們直接來看程式碼

export default {

  props: ["value"],

  computed: {

    data: {

      get() {

        return this.value;

      },

      set(val) {

        this.$emit("input", val);

      }

    }

  }

};

是不是簡單很多呢，打完收工下班！