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

相关推荐
一块plus1 分钟前
一门原本只是“试试水”的课程,没想到炸出了一群真诚的开发者
javascript·面试·github
亿万托福2 分钟前
数字世界的构筑之艺:前端技术栈的浅描与远瞻
前端
用户40812812003813 分钟前
JWT 和 token 区别
前端
yvvvy3 分钟前
🚀React + Vite 实战:打造智能单词学习应用
javascript
盏茶作酒293 分钟前
打造自己的组件库(三)打包及发布
前端·vue.js
单休好_好就好在比双休少一天4 分钟前
Vite打包从12.17M -> 7.95M,速度提升≈51.85%
前端·javascript
yinke小琪4 分钟前
JavaScript DOM内容操作常用方法和XSS注入攻击
前端·javascript
归于尽4 分钟前
从 TodoList 看自定义 Hook 的设计思想
前端
G等你下课5 分钟前
如何优雅地组织业务逻辑?自定义 Hook 全解析
前端·react.js
刘坤155 分钟前
封装axios二方包
前端·http