Vue v-model 在组件上用法(prop emit相关规定修饰符的访问)

海胆Sur

已于 2022-03-28 14:09:36 修改

阅读量960

点赞数

分类专栏： # Vue 文章标签： vue v-model

于 2021-07-29 23:29:04 首次发布

本文链接：https://blog.csdn.net/I_fole_you/article/details/119223297

版权

Vue 专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了Vue.js中的v-model语法，它是表单双向数据绑定的简洁表示。v-model针对不同类型的输入元素使用不同的属性和事件，如text和textarea使用value和input，checkbox和radio使用checked和change，select使用value和change。在组件上使用v-model需要通过prop和emit配合，组件内部通过prop接收值，并在input事件时emit更新事件。此外，还提到了v-model的修饰符和带参数的v-model如何传递。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

v-model 是表单双向数据绑定的简写方式
v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 字段将 value 作为 prop 并将 change 作为监听事件。

不简写：

v-bind:value="xxx" 
v-on:input="xxx=$even.target.value"

在组件上使用 v-model 绑定子组件的input value

通过 prop 与固定格式的 emit 事件配合
绑定的方法：

v-model:propname="xxx"

默认prop为 modelValue
也就是说使用 v-model="xxx" 的绑定方式
相当于 v-model:modelValue="xxx"
对应抛出的事件名 update:propname结构，
默认 update:modelValue

例子：

<my-component v-model:propX="xxxx"></my-component>

{
  props: {
    propX: String
  },
  emits: ['update:propX'],
  template: `
    <input
      type="text"
      :value="propX"
      @input="$emit('update:propX', $event.target.value)">
  `
}