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

一、v-model

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

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

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

Vue SFC Playground

父组件 <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> 子组件 <script setup> const model = defineModel() </script> <template> <span>My input</span> <input v-model="model"> </template>

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

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

父组件 <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> 子组件 <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')结合使用。