Vue中组件传值

news/2024/4/24 23:28:23/

Vue官网链接-向子组件传递数据
Vue官网-Prop

父组件将值传递给子组件

父组件中的值可以通过v-bind与子组件中的props属性将值传递给子组件,也可以通过v-on与this.$emit()间接被子组件中的函数调用

1、使用v-bind将父组件中data中的键与子组件中的props键进行绑定

<body>
<div id="app">//props中的键与父组件里data中的键进行绑定在子组件里进行v-bind绑定从而达到父传子的效果,  //数据的传递是实时的:当父组件中的数据变化是,子组件中的数据也会随之变化<hello v-bind:name="msg"></hello>
</div>
<script>var hello={props:{name: String,},template:'<h1>hello,{{name}}</h1>'}new Vue({el: '#app',data(){return{msg:'张三'}},components:{hello}})
</script>
</body>

2、通过ref与this.$refs父组件中的函数可以调用子组件中的函数,这种方式其实是子组件先调用父组件中定义的函数通过父组件中的函数改变父组件中的值,在由父组件通过v-bind传递给子组件,


<body>
<div id="app"><hello v-bind:name="msg" v-on:relation="change"></hello>
</div>
<template id="hel"><div><h1>{{name}}</h1><button v-on:click="$emit('relation')">Enlarge text</button></div>
</template><script>var hello={template:'#hel',props:{name:String}}new Vue({el: '#app',data(){return{msg:'张三'}},methods:{change(){this.msg='李四'}},components:{hello}})
</script>
</body>

子传父

Vue官网-$emit
Vue官网-.sync修饰符

通过.sync与this.$emit(‘update:props键名’,‘数据’)可以将子组件中的数据回传给父组件中的data键,类似于v-model的双向绑定


<body>
<div id="app">//使用.sync关键将子组件中的数据与父组件中的数据双向绑定<hello v-bind:name.sync="msg"></hello>
</div>
<template id="hel"><div><h1>{{name}}</h1><button v-on:click="changeMsg">Enlarge text</button></div>
</template><script>var hello={template:'#hel',props:{name:String},methods:{changeMsg(){this.$emit('update:name','赵六')}}}new Vue({el: '#app',data(){return{msg:'张三'}},components:{hello}})
</script>
</body>

http://www.ppmy.cn/news/48090.html

相关文章

【SpringBoot】一:SpringBoot的基础(下)

文章目录 1.外部化的配置1.1 配置文件基础1.1.1 配置文件格式1.1.2 application文件1.1.3 application.properties1.1.4 application.yml1.1.5 environment1.1.6 组织多文件1.1.7多环境配置 1.2 绑定Bean1.2.1 简单的属性绑定1.2.2 嵌套Bean1.2.3 扫描注解1.2.4 处理第三方库对…

Vue中mixins(混入)的介绍和使用

什么是Mixin&#xff1f; 想要使用一个事物或者工具&#xff0c;我们首要先了解它是什么&#xff0c;这样我们才好对症下药。 其实Mixin不是Vue专属的&#xff0c;可以说它是一种思想&#xff0c;也可以说它就是混入的意思&#xff0c;在很多开发框架中都实现了Mixin(混入)&a…

异常(throwable)

异常 异常分类 &#xff08;1&#xff09;Throwable类 所有的异常类型都是它的子类&#xff0c;它派生两个子类Error、Exception。 &#xff08;2&#xff09;Error类 表示仅靠程序本身无法恢复的严重错误&#xff08;内存溢出动态链接失败、虚拟机错误&#xff09;&#…

Seata强一致性事务模式XA的设计理念

承接上文分布式事务Seata-AT模式 XA规范是什么? 是分布式事务处理DTP&#xff08;Distributed Transaction Processing&#xff09;的标准。是描述全局的事务管理器和局部的资源管理器之间的接口规范。允许多个资源&#xff08;如数据库、应用服务、消息队列&#xff09;在同…

class与typename的异同

一、class与typename的相同点 typename关键字常用于函数模板&#xff0c;这里首先引入函数模板的概念&#xff1a;函数模板代表了一个函数家族&#xff0c;该函数模板与类型无关&#xff0c;在使用时被参数化&#xff0c;根据实参类型产生函数的特定 类型版本 //函数模板格式…

idea 配置docker 进行上传镜像,部署启动容器

前言 在我们开发测试过程中&#xff0c;需要频繁的更新docker镜像&#xff0c;然而默认情况下&#xff0c;docker的2375端口是关闭的&#xff0c;下面介绍如何打开端口。 修改docker配置文件 操作步骤&#xff1a; 1.1、修改配置 登录docker所在服务器&#xff0c;修改docker…

深入浅出剖析JAVA多线程原理

1. 线程基础知识 1.1 线程与进程 1.1.1 进程 ●程序由指令和数据组成&#xff0c;但这些指令要运行&#xff0c;数据要读写&#xff0c;就必须将指令加载至 CPU&#xff0c;数据加载至内存。在指令运行过程中还需要用到磁盘、网络等设备。进程就是用来加载指令、管理内存、管理…

聚观早报|马斯克将TruthGPT挑战ChatGPT;腾讯披露自研芯片新进展

今日要闻&#xff1a;马斯克将TruthGPT挑战ChatGPT&#xff1b;苹果在印度年销售额近60亿美元&#xff1b;腾讯披露自研芯片沧海最新进展&#xff1b;特斯拉中国工厂普通工人月薪约1万元&#xff1b;飞猪将直接向阿里CEO张勇汇报 马斯克将TruthGPT挑战ChatGPT 4 月 18 日消息&…

【大厂直通车】哔哩哔哩日常实习_测开面经

📑哈喽,大家好,我是小浪;本篇博客更新的是最新B站测开面经,本专栏非常适合目前准备找实习,或者准备冲秋招测试,测开方向的同学阅读订阅,持续更新各大厂真题面经,带你成为offer收割机!! 🧃对于订阅本专栏的同学们,博主在努力更新,只需要一杯奶茶钱,订阅本专栏,…

数据结构(三)—— 哈希表

文章目录 一、哈希表积累1.1 哈希map1.2 哈希set 二、哈希表基础三、题3.1 242 有效的字母异位词3.2 349 两个数组的交集3.3 202 快乐数3.4 1 两数之和3.5 54 四数相加II 一、哈希表积累 什么时候想到用哈希法&#xff1a;当要需要查询一个元素是否出现过、判断一个元素是否出…

从单兵作战到生态共创,纵目科技打响智驾2.0新战役

4月18日&#xff0c;第十二届上海国际汽车工业展览会&#xff08;简称&#xff1a;2023上海车展&#xff09;在上海国家会展中心盛大启幕。纵目科技携最新自动驾驶解决方案——Amphiman 3000、8000行泊一体解决方案、Trinity 3000、8000舱行泊一体解决方案以及众多摄像头产品强…

C++智能指针unique_ptr

智能指针的设计思路 智能指针是类模板&#xff0c;在栈上创建智能指针对象。把普通指针交给智能指针对象。当智能指针对象过期时&#xff0c;调用析构函数释放普通指针的内存。 有unique_ptr,shared_ptr和weak_ptg三种智能指针 unique_ptr unique_ptr独享它指向的对象&…

深度学习笔记之残差网络(ResNet)

深度学习笔记之残差网络[ResNet] 引言引子&#xff1a;深度神经网络的性能问题核心问题&#xff1a;深层神经网络训练难残差网络的执行过程残差网络结构为什么能够解决核心问题残差网络的其他优秀性质 引言 本节将介绍残差网络( Residual Network,ResNet \text{Residual Netwo…

【nacos配置中心】源码部分解析

启动初始化 SpringApplication.prepareContext applyInitializers 回调ApplicationContextInitializer的initialize方法 getInitializers()从applicationContext获取List<ApplicationContextInitializer<?>> initializers 这个集合是通过SpringApplication的…

第三十二章 配置镜像 - 编辑或删除故障转移成员

文章目录 第三十二章 配置镜像 - 编辑或删除故障转移成员编辑或删除故障转移成员 第三十二章 配置镜像 - 编辑或删除故障转移成员 编辑或删除故障转移成员 导航至编辑镜像页面(系统管理>配置>镜像设置>编辑镜像)。使用备份故障转移成员上的删除镜像配置按钮将其从镜…

ChatGpt API接口编程基础与使用

在研读完OpenAi官网文档的基础上&#xff0c;本文大部分内容是围绕编程方面&#xff0c;包括ChatGPT模型接口、图像生成接口、敏感数据拦截等&#xff0c;只有一小部分内容围绕如何通过temperature调参优化使用提示技巧。 一、OpenAi Api调用库 OpenAi开放了一系列模型接口API…

AUTOSAR存储服务之FEE换页策略介绍

概述 如下图是AUTOSAR Memory Stack的架构图,对于Memory Stack的介绍请参考AUTOSAR MemoryStack详细介绍_钢琴上的汽车软件的博客-CSDN博客 随着现在MCU携带的内置flash空间越来越大,从成本节省以及方便使用等方面考虑,在产品设计和开发过程中常用Flash EEPROM Emulation技…

Perl学习教程大纲

以下是一个可能的 Perl 学习教程大纲&#xff1a; 一、Perl 简介 Perl 的历史和发展 Perl 的特点和优点 Perl 的应用领域 二、Perl 基础语法 Perl 的变量和数据类型 Perl 的运算符和表达式 Perl 的控制结构&#xff08;if、while、for、foreach 等&#xff09; Perl 的…

Linux操作系统网络模块

Linux操作系统的网络模块是负责网络通信的核心部分。它通过实现各种协议和算法&#xff0c;使得计算机能够在网络中进行数据交换和通信。网络模块主要包括以下几个方面的功能&#xff1a; &#xff08;1&#xff09;IP协议栈&#xff1a;负责处理网络层的数据包&#xff0c;实…

Java语法理论和面经杂疑篇《十一. JDK8新特性》

目录 1. Java版本迭代概述 1.1 发布特点&#xff08;小步快跑&#xff0c;快速迭代&#xff09; 1.2 名词解释 1.3 各版本支持时间路线图 1.4 各版本介绍 1.5 JDK各版本下载链接 1.6 如何学习新特性 2. Java8新特性&#xff1a;Lambda表达式 2.1 关于Java8新特性简介 …