vue2,3：v-model的语法糖

VUE2

使用场景: 当我们想从父组件主动传给子组件一个值,然后在父组件获取一个子组件的返回的值. (替代了先父传子,再子传父的绑定事件)

v-model=“data” 等价于：
<input :value="data" @input="data = $event.target.value" />

自定义组件:

<custom-component v-model="data"></custom-component>
等价于
<custom-component :value="data" @input="data = $event"></custom-component>

实现步骤:

• 父类在子组件上使用 v-model = 'message'
• 子组件接收 value 作为 props
• 子组件通过 $emit(‘ input’, newValue) 触发更新事件，通知父组件更新数据。

例如:

value: { // 当前显示的下标 (使用v-model语法糖: 1.props需为value; 2.需回调input事件)
        type: [String, Number],
        default: 0
       },

• 回调 input 事件

this.$emit('input',"想用返回的值")

• 这时父类的 messageXX = '想用返回的值'

🌰:

父组件
<view>数据:{{message}} </view>
<myTarb  v-model="message" ></myTarb>

子组件:
  props: {
      value: { // 当前显示的下标 (使用v-model语法糖: 1.props需为value; 2.需回调input事件)
         type: [String, Number],
         default: 0
      },
    }

this.$emit('input','回调数据')

父页面显示: 
数据: 回调数据

VUE3

v-model 在表单元素上的用法与 Vue 2 类似:

自定义组件使用:

• 子组件接收 modelValue 作为 props。
• 子组件通过 $emit(‘update:modelValue’, newValue) 触发更新事件，通知父组件更新数据。

父组件:
<custom-input v-model="message" />
等价于
<custom-input :modelValue="message" @update:modelValue="message = $event" />

子组件:
<script setup>
defineProps(['modelValue']);
defineEmits(['update:modelValue']);
</script>

<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

VUE3 支持一个组件使用多个 v-model

• 子组件分别接收 name 和 age 作为 props。
• 子组件通过 $emit(‘update:name’, newValue) 和 $emit(‘update:age’, newValue) 触发更新事件，通知父组件更新数据。

例如:

父组件:
<custom-form v-model:name="name" v-model:age="age" />

<script setup>
defineProps(['name', 'age']);
defineEmits(['update:name', 'update:age']);
</script>

<template>
  <input
    :value="name"
    @input="$emit('update:name', $event.target.value)"
    placeholder="输入姓名"
  />
  <input
    type="number"
    :value="age"
    @input="$emit('update:age', $event.target.value)"
    placeholder="输入年龄"
  />
</template>