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

一、v-model

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

Vue 3.4 开始,推荐的实现方式是使用 defineModel() 宏;

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

Vue SFC Playground

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')结合使用。

相关推荐
在钱塘江13 分钟前
《你不知道的JavaScript-上卷》-笔记-5-作用域闭包
前端
搬砖码13 分钟前
Vue病历写回功能:实现多输入框内容插入与焦点管理🚀
前端
不简说18 分钟前
史诗级更新!sv-print虽然不是很强,但却是很能打的设计器组件
前端·产品
用户952511514015519 分钟前
最常用的JS加解密场景MD5
前端
Hilaku19 分钟前
“虚拟DOM”到底是什么?我们用300行代码来实现一个
前端·javascript·vue.js
打好高远球25 分钟前
mo契官网建设与SEO实践
前端
神仙别闹31 分钟前
基于Java+MySQL实现(Web)可扩展的程序在线评测系统
java·前端·mysql
心.c1 小时前
react当中的this指向
前端·javascript·react.js
Java水解1 小时前
Web API基础
前端
闲鱼不闲1 小时前
实现iframe重定向通知父级页面跳转
前端