组件 model 属性简介

v-model语法糖:

<DefineModel
  v-model='val'
/>

<!--
上面组件默认相当于
<DefineModel
  :value='val'
  @change='params => { val = params }'
/>

v-model 指令相当于在组件外部绑定一个 value 属性以及一个 change 事件
change 事件接收一个组件内部传递过来的参数，用于改变 value 参数
-->

model.vue 组件代码(子组件):

<template>
  <div class="model-wrapper">
    <el-input
      placeholder='组件 model 属性测试'
      type='text'
      v-model='selfInputvalue'
      @change='handleChange'
      @input='handleChange'
    />
  </div>
</template>

export default {
  name: 'DefineModel',
  model: {
    prop: 'inputValue',
    event: 'change'
  },
  props: {
    inputValue: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      selfInputvalue: ''
    };
  },
  methods: {
    handleChange(val) {
      /**
       * 回调组件外部的 change 事件
       * 事件与 model 属性的 event 保持一致
       */
      this.$emit('change', val);
    }
  },
  created () {
    /**
     * 组件内部声明变量保存外部传来的参数
     * 避免修改时警告报错
     */
    this.selfInputvalue = this.inputValue;
  }
};

.model-wrapper {
  padding: 20px;
  box-sizing: border-box;
  .el-input {
    width: 200px;
  }
}

组件使用(父组件) app.vue

<template>
  <div>
    <DefineModel
      v-model='val'
    />
    <!--
      上面组件默认相当于
      <DefineModel
        :value='val'
        @change='params => { val = params }'
      />
      结合当前组件内部 model 属性（存在的话）则相当于
      <DefineModel
        :inputValue='val'
        @change='params => { val = params }'
      />
    -->
  </div>
</template>

import DefineModel from '@/components/model';
export default {
  name: 'App',
  components: {
    DefineModel
  },
  data () {
    return {
      val: 'as'
    };
  },
  watch: {
    // 监听 val 改变
    val (val) {
      console.log(val);
    }
  }
};