vue的model属性

2.x语法

允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

如果要将属性或事件名称更改为其他名称，则需要在 ChildComponent 组件中添加 model 选项：

<ChildComponent v-model="url" />

<!--ChildComponent -->
 <el-upload
    class="upload"
    :action="action"
    :headers="headers"
    :multiple="false"
    name="file"
    accept="image/*"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :auto-upload="true"
    :show-file-list="false"
  >
    <el-image
      v-if="url !== ''"
      :src="url"
      class="upload__img"
      fit="cover"
    ></el-image>
    <i v-else class="el-icon-plus upload__icon"></i>
  </el-upload>

export default {
  model: {
    prop: 'url',
    event: 'success
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    url: {
      type: String,
      default: ''
    }
  },
	methods: {
	 	handleSuccess(response) {
	      this.$emit('success', response.data)
	    },
	}
}

3.x 语法

在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 并接收抛出的update:modelValue 事件：

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

若需要更改 model 名称，而不是更改组件内的 model 选项，那么现在我们可以将一个 argument 传递给 model：

<ChildComponent v-model:title="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

在自定义组件上使用多个 v-model：

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

<!-- 是以下的简写： -->

<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>

对于所有不带参数的 v-model，请确保分别将 prop 和 event 命名更改为 modelValue 和 update:modelValue：

<ChildComponent v-model="pageTitle" />

export default {
  props: {
    modelValue: String // 以前是`value：String`
  },
  emits: ['update:modelValue'],
  methods: {
    changePageTitle(title) {
      this.$emit('update:modelValue', title) // 以前是 `this.$emit('input', title)`
    }
  }
}