封裝vue組件的那些事

自定義組件state動態賦值給父組件state

例：一個輸入框組件，需要組件的state能一直同步給父組件的state

自定義組件 commodityNameInput：

<template>
  <input class="com_commodityNameInput" type="text" v-model="endValue"  placeholder="商品名稱">
</template>
...
 data: function () {
          return {
            endValue:'',
          }
      },
...
 watch:{
        'endValue':function(newVal,oldVal){
          this.$emit('update:proVal',newVal);
        }
      },

使用：

<commodityNameInput :proVal.sync="name"></commodityNameInput>
...
 data: function () {
          return {
            name:'',
          }
      },

效果：name與組件的endValue一直保持一直變化