封装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一直保持一直变化