当前位置: 首页 > news >正文

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

http://www.dtcms.com/a/27820.html

相关文章:

  • 形参和实参
  • 强化学习入门
  • 12.按身高排序(贪心)思路解析+源码
  • C++初阶——简单实现vector
  • 动态规划(Dynamic Programming)详解
  • PLC扫描周期和工作原理
  • 【SQL】多表查询案例
  • 模型评测:基于Python和PyTorch的深度学习模型性能评估
  • leetcode 1155. 掷骰子等于目标和的方法数
  • AIGC训练效率与模型优化的深入探讨
  • redis的缓存击穿,雪崩,穿透
  • 大模型微调解读及参数设置实践示例
  • Python 正则表达式的非捕获组介绍
  • 亲测Windows部署Ollama+WebUI可视化
  • 2024年国赛高教杯数学建模A题板凳龙闹元宵解题全过程文档及程序
  • 在nodejs中使用ElasticSearch(二)核心概念,应用
  • 从面试中的“漏掉步骤”谈自我表达与思维方式的转变
  • 【设计模式】【创建型模式】工厂方法模式(Factory Methods)
  • LeetCodehot 力扣热题100
  • Qt5 C++ TcpSocket 如何判断是服务主动断开tcp socket连接?
  • Django 5实用指南(五)模板系统
  • 如何在 Mac 上安装并配置 JDK 环境变量
  • [AHOI2018初中组] 分组---贪心算法
  • 『ob』obsidian文件导出:使用Pandoc插件实现多格式转换
  • Leetcode63:不同路径 II
  • Oracle EBS 12.1和APEX 集成时 Apache的配置代理
  • OpenAI ChatGPT在心理治疗领域展现超凡同理心,通过图灵测试挑战人类专家
  • win 应用程序无法正常启动(0xc0000142)。请单击确定关闭应用程序
  • 使用Flink Operator部署Flink on k8s方案
  • QT多线程编程基础