vue 父组件和子组件中v-model和props的使用和区别

zpjing~.~2025-02-22 19:38

一、v-model

1、v-model 可以在组件上使用以实现双向绑定。即父组件的值可以传递给子组件，子组件的值修改后，父组件的值会同步更新。

从 Vue 3.4 开始，推荐的实现方式是使用 defineModel() 宏；

2、**示例：**最常用的使用方式：父组件的值，传值给子组件，子组件的input绑定了此字段，这样子组件input的内容修改时，父组件里的值便会同步更新，示例如下

javascript 复制代码

父组件
<script setup>
import Child from './Child.vue'
import { ref } from 'vue'

const msg = ref('Hello World!')
</script>

<template>
  <h1>{{ msg }}</h1>
  <Child v-model="msg" />
</template>

javascript 复制代码

子组件
<script setup>
const model = defineModel()
</script>

<template>
  <span>My input</span> <input v-model="model">
</template>

3、其他实例：父组件和子组件，弹窗的数据双向绑定

4、延伸：父组件想要传参给子组件多个双向绑定的数据，可以是用v-model的参数（v-model:title）

javascript 复制代码

父组件
<script setup>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'
  
const bookTitle = ref('v-model argument example')
const content = ref('content')
</script>

<template>
  <h1>{{ bookTitle }}</h1>
  <h1>{{ content }}</h1>
  <MyComponent v-model:title="bookTitle" v-model:content="content" />
</template>

javascript 复制代码

子组件
<script setup>
const title = defineModel('title')
const content = defineModel('content')
</script>

<template>
  <input type="text" v-model="title" />
  <input type="text" v-model="content" />
</template>

二、props属性

props也是父组件的值传递给子组件，但是是单向数据流；子组件的值改变时，父组件的值不会同步更新，需要结合$emit('someEvent')来实现子组件的值同步更新到父组件；

我的理解是v-model的底层机制等同于props和$emit('someEvent')结合使用。