vue2 组件传递数据

向子组件传递数据通过Props

1.创建子组件

详细步骤:
1.在components创建子组件
2.等父组件接受到参数后通过Props来接受父组件传递过来的数据

<template><div id="app"><h2>title:{{ title }}</h2><p>tips:{{ tips }}</p></div>
</template>
<script>
export default{data(){return{}},props:['title','tips']
}
</script>

2.创建父组件

详细步骤:
1.导入子组件页面路径
2.在components注册组件
3.创建子组件标签
4.在子组件标签接受子组件传递过来的数据

<template><div id="app"><my-component /><!-- <HelloWorld /> --><hello-world /><my-son  title="标题" :tips="tips"/></div>
</template><script>
import HelloWorld from './components/HelloWorld.vue';
import MySon from './components/MySon.vue'
export default{name:'App',components:{HelloWorld,MySon},data(){return{tips:'一个友好的提示语'}}
}
</script><style></style>

在这里插入图片描述
效果图
在这里插入图片描述

父传子优化代码

如果传入的prop很多,可以使用传入整体props对象
在这里插入图片描述

案例 父组件输入的内容在子组件展示

子组件
子组件有哪些操作?
1.创建一个新的页面
2.用props来接受父页面传递的参messageFormParent
3.使用{{}} 来展示内容

<template><div id="app"><h3>this is parent component</h3><input type="text" ><p>收到父组件的消息 {{ messageFormParent }}</p></div>
</template>
<script>
export default{data(){return{}},props:['messageFormParent'],
}
</script>

父组件
1.导入子组件页面
2.注册子页面
3.创建子组件标签
4.在子组件标签中 通过v-bind绑定数据,通过messageFormParent传递出去
5.组件中双向数据绑定 :这个是父组件input输入框,子组件也跟着展示,父组件通过v-model来绑定

<template><div id="app"><h3>this is parent component</h3><input type="text" v-model="message"><p>收到子组件的消息</p><my-son :messageFormParent="message" /></div>
</template><script>
import MySon from './components/MySon.vue'
export default{name:'App',components:{MySon},data(){return{message:''}}}
</script><style></style>

案例 子组件输入的内容在父组件展示 两种写法

第一种写法 通过v-bind绑定事件和v-on监听事件

操作步骤
1.子组件input输入框通过v-model双向数据绑定;再通过按键事件来监听输入的内容
2.父组件在子组件标签里通过v-bind绑定事件和v-on监听事件
3.在子组件内通过按键监听事件用$emit来接收父组件传递过来的事件和要给父组件传递过去的参数
4.父组件通过监听事件展示子组件传递过来的数据展示
子组件

<template><div id="app"><h3>子组件页面</h3><!-- 子组件通过v-model双向数据绑定把消息传递给父组件 --><!-- 通过keyup事件来监听这个输入的内容 --><input type="text"  v-model="message" @keyup="send"><p>收到父组件的消息 {{ messageFormParent }}</p></div>
</template>
<script>
export default{data(){return{message:'',}},props:['messageFormParent'],methods:{// 通过$emit向父组件传递消息send(){// reveiveOn:父组件传递过来的事件  message要传递的参数this.$emit('reveive',this.message)}}
}
</script>

父组件

<template><div id="app"><h3>父组件页面</h3><input type="text" v-model="message"><p>接收到子组件的消息:{{ messageChild }}</p><my-son :messageFormParent="message" v-on:reveive ="reveive"/></div>
</template><script>
import MySon from './components/MySon.vue'
export default{name:'App',components:{MySon},data(){return{message:'',messageChild:'',}},methods:{// 接受一个自定义事件来接收函数reveive(data){// 接受子组件传递过来的参数this.messageChild = data}}}
</script><style></style>

也可以通过v-model 双向数据绑定绑定

子组件

<template><div id="app"><h3>子组件页面</h3><!-- 子组件通过v-model双向数据绑定把消息传递给父组件 --><!-- 通过keyup事件来监听这个输入的内容 --><input type="text"  v-model="message" @keyup="send"><!-- <p>收到父组件的消息 {{ messageFormParent }}</p> --><p>收到父组件的消息 {{ value  }}</p></div>
</template>
<script>
export default{data(){return{message:'',}},// props:['messageFormParent'],props:['value'],methods:{// 通过$emit向父组件传递消息send(){// reveiveOn:父组件传递过来的事件  message要传递的参数this.$emit('input',this.message)}}
}
</script>

父组件

<template><div id="app"><h3>父组件页面</h3><input type="text" v-model="message"><p>接收到子组件的消息:{{ messageChild }}</p><!-- <my-son :messageFormParent="message" v-on:reveive ="reveive"/> --><my-son v-model="messageChild"/></div>
</template><script>
import MySon from './components/MySon.vue'
export default{name:'App',components:{MySon},data(){return{message:'',messageChild:'',}},methods:{// 接受一个自定义事件来接收函数reveive(data){// 接受子组件传递过来的参数this.messageChild = data}}}
</script><style></style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/235563.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

IDEA 设置 SpringBoot logback 彩色日志(附配置文件)

1、背景说明 最开始使用 SpringBoot 时&#xff0c;控制台日志是带彩色的&#xff0c;让人眼前一亮&#x1f604; 后来彩色莫名丢失&#xff0c;由于影响不大&#xff0c;一直没有处理。 2、配置彩色 最近找到了解决方法&#xff08;其实是因为自定义 logback.xml&#xff0…

java并发编程五 ReentrantLock,锁的活跃性

多把锁 一间大屋子有两个功能&#xff1a;睡觉、学习&#xff0c;互不相干。 现在小南要学习&#xff0c;小女要睡觉&#xff0c;但如果只用一间屋子&#xff08;一个对象锁&#xff09;的话&#xff0c;那么并发度很低 解决方法是准备多个房间&#xff08;多个对象锁&#xf…

GNSS技术的巧妙运用:灾害应对中的定位与救援

随着全球气候变化的加剧&#xff0c;自然灾害的频发成为当今社会面临的重大挑战之一。在灾害发生后&#xff0c;及时、准确的救援至关重要。全球导航卫星系统&#xff08;GNSS&#xff09;技术通过其卓越的定位功能&#xff0c;为灾害应对提供了独特的支持。本文将深入研究GNSS…

使用MybatisPlus置空某些指定字段

当前的MybatisPlus默认会对空实体内的字段不置空&#xff0c;所以才引出了此种方法&#xff0c;很方便简单&#xff1a; 使用 Wrappers.lambdaUpdate方法就可以解决&#xff0c;方法的源码如下&#xff1a;条件为entity内的值&#xff0c;使用lambdaUpdate去set空的值 举个例子…

11.2 设备树下的 LED 驱动

一、修改设备树文件 首先进入该目录下 /linux/atk-mpl/linux/my_linux/linux-5.4.31/arch/arm/boot/dts 打开 stm32mp157d-atk.dts 文件&#xff0c;在根节点 "/" 最后输入以下内容&#xff1a; stm32mp1_led {compatible "atkstm32mp1-led"; // 设置…

Java操作Word修订功能:启用、接受、拒绝、获取修订

Word的修订功能是一种在文档中进行编辑和审阅的功能。它允许多个用户对同一文档进行修改并跟踪这些修改&#xff0c;以便进行审查和接受或拒绝修改。修订功能通常用于团队合作、专业编辑和文件审查等场景。 本文将从以下几个方面介绍如何使用免费工具Free Spire.Doc for Java在…

机器视觉系统选型-高图像精度

图像精度 X方向系统精度&#xff08;X方向象素值&#xff09;&#xff1d; 视野范围&#xff08;X方向&#xff09; CCD芯片象素数量&#xff08;X方向&#xff09; Y方向系统精度&#xff08;Y方向象素值&#xff09;&#xff1d; 视野范围&#xff08;Y方向 CCD芯片象素数量&…

【lesson17】minishell(shell的模拟实现)

文章目录 模拟实现shell的思路具体实现一直循环&#xff08;一&#xff09;显示提示行符&#xff08;二&#xff09;获取用户输入的字符串&#xff08;三&#xff09;对字符串进行解析&#xff08;四&#xff09;创建子进程执行指令&#xff08;5&#xff09; 细节问题解决问题…

Redis第2讲——Java三种客户端(Jedis、Lettuce和Redisson)

上篇文章介绍了Redis的9种数据类型和常命令、7种数据结构和9种编码方式。但是如果想要把它应用到项目中&#xff0c;我们还需要一个redis的客户端。redis的Java客户端种类还是很多的&#xff0c;其中使用最广泛的有三种——Jedis、lettuce和redisson&#xff0c;下面我们一起来…

web前端游戏项目-雷霆战机飞机大战游戏【附源码】

文章目录 一&#xff1a;雷霆战机HTML源码&#xff1a;JS文件&#xff1a;&#xff08;1&#xff09;function.js&#xff08;2&#xff09;impact.js&#xff08;3&#xff09;move.1.1.js&#xff08;4&#xff09;script.js 二&#xff1a;飞机大战HTML源码&#xff1a;CSS源…

性能压力测试--确保企业数字化业务稳健运行

随着企业的数字化转型和依赖云计算的普及&#xff0c;软件系统的性能已经成为企业成功运营的关键因素之一。性能压力测试作为确保系统在各种条件下都能高效运行的关键步骤&#xff0c;对企业的重要性不可忽视。以下是性能压力测试对企业的几个重要方面的影响和作用&#xff1a;…

最新AI创作系统ChatGPT系统源码+DALL-E3文生图+AI绘画+GPT语音对话功能

一、前言 SparkAi创作系统是基于ChatGPT进行开发的Ai智能问答系统和Midjourney绘画系统&#xff0c;支持OpenAI-GPT全模型国内AI全模型。本期针对源码系统整体测试下来非常完美&#xff0c;可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作Ch…

ubuntu 20.04安装一系列软件

1&#xff09;安装下载的包的指令&#xff1a; sudo dpkg -i xxx.deb 2&#xff09;通用指令&#xff1a; sudo apt-get install xxxx 3&#xff09;更新和升级软件包&#xff08;遇到问题先尝试这个指令&#xff09;&#xff1a; sudo apt-get update sudo apt-get install…

Java_集合进阶(Collection和List系列)

一、集合概述和分类 1.1 集合的分类 已经学习过了ArrayList集合&#xff0c;但是除了ArrayList集合&#xff0c;Java还提供了很多种其他的集合&#xff0c;如下图所示&#xff1a; 我想你的第一感觉是这些集合好多呀&#xff01;但是&#xff0c;我们学习时会对这些集合进行…

基于alibaba druid的血缘解析工具

基于alibaba druid的血缘解析 1、前言 仅仅对mysql数据库的select查询语句进行了血缘解析&#xff0c;该血缘解析包含了原始表字段、临时表字段和目标表字段的关联关系。 2、涉及到技术 主要使用了druid的如下接口对语法树进行解析&#xff1a; &#xff08;1&#xff09;…

JavaWeb笔记之前端开发CSS

一 、引言 1.1 CSS概念 层叠样式表(英文全称&#xff1a;Cascading Style Sheets)是一种用来表现HTML&#xff08;标准通用标记语言的一个应用&#xff09;或XML&#xff08;标准通用标记语言的一个子集&#xff09;等文件样式的计算机语言。CSS不仅可以静态地修饰网页&…

美颜技术详解:深入了解视频美颜SDK的工作机制

本文将深入探讨视频美颜SDK的工作机制&#xff0c;揭示其背后的科技奥秘和算法原理。 1.引言 视频美颜SDK作为一种集成到应用程序中的技术工具&#xff0c;通过先进的算法和图像处理技术&#xff0c;为用户提供令人印象深刻的实时美颜效果。 2.视频美颜SDK的基本工作原理 首…

SVN小白常见操作流程

SVN小白常见操作流程 一、什么是Subversion&#xff1f;二、TortoiseSVN客户端安装教程三、SVN 操作3.1 SVN Ckeckout(检出)3.2 Add(新增文件)3.3 SVN Commit(提交)3.4 SVN Update(更新操作)3.5SVN Delete(删除操作)3.6 SVN Revert to a revision(版本回溯)3.7 不同版本内容之间…

Jenkins 执行远程脚本的插件—SSH2 Easy

SSH2 Easy 是什么&#xff1f; SSH2 Easy 是一个 Jenkins 插件&#xff0c;它用于在 Jenkins 构建过程中通过 SSH2 协议与远程服务器进行交互。通过该插件&#xff0c;用户可以在 Jenkins 的构建过程中执行远程命令、上传或下载文件、管理远程服务器等操作。 以下是 SSH2 Eas…

vue3使用mock模拟后端接口

安装mock axios yarn add mock yarn add axios 新建在src/mockdata/automenu.js 模拟后端的json数据格式 import Mock from mockjs Mock.mock(/menu,get,{status: 200,menuList: [{id : 1,iconCls: "fa fa-window",name: 系统管理,url: /},{id: 2,icon: icon-j…