【vue】v-model的原理？【数据】

v-model本质上只是一个语法糖。

1. 作用在表单元素上

<input v-model="value" />
//等价于
<input 
  v-bind:value="message"
  v-on:input="message=$event.target.value" />

2. 作用在组件上

在自定义组件中，v-model 默认会利用名为 value 的 prop和名为 input 的事件本质上是一个父子组件通信的语法糖，通过prop和emit实现。

<child :value="message"  @input="function(e){message = e}"></child>

在组件的实现中，可以通过 v-model属性来配置子组件接收的prop名称，以及派发的事件名称。例子：

// 父组件
<aa-input v-model="aa"></aa-input>
// 等价于
<aa-input v-bind:value="aa" v-on:input="aa=$event.target.value"></aa-input>

// 子组件：
<input v-bind:value="aa" v-on:input="onmessage"></aa-input>

props:{value:aa,}
methods:{
    onmessage(e){
        $emit('input',e.target.value)
    }
}

组件 v-model（新vue3.4）

<!-- Parent.vue -->
<Child v-model="countModel" />

<!-- Child.vue -->
<script setup>
const model = defineModel()

function update() {
  model.value++
}
</script>

<template>
  <div>Parent bound v-model is: {{ model }}</div>
  <button @click="update">Increment</button>
</template>

kankan-web / coding

【vue】v-model的原理？【数据】 #14

相关问题

1. 作用在表单元素上

2. 作用在组件上

组件 v-model（新vue3.4）