组建中通过Props进行数据传递

已于 2024-08-31 11:08:18 修改
阅读量155 收藏
点赞数 3
文章标签： vue.js 前端 javascript
于 2024-08-30 20:29:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MuYuZiBuYan/article/details/141726645
版权

Props

        一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props，哪些是透传 attribute

      1.创建一个组件

                script 中添加 defineProps 括号里写需要传递的值

2.在父类中引用并传递值 

效果图

 

3. 想传递图片路径时为avatar赋值即可

 将组件图片的地址更改成传递过来的值即可

效果图 

 

        如果直接处理传递过来的值时会报错 

        我们需要先进行定义在打印

         并且传递过来的值也不能直接改变，应为我们传递过来的值是一个只读类型的数字需要在值后面添加时需要使用计算属性

        运行结果 

        以上方法也有一些缺点当传递的值太多时都写在同一行太过繁琐，当子组件获得值时父类没给时，父类可能没有给值。所以需要对传递过来的值进行效验。

         将username转换成Number类型在执行

        当传递过来的值不是规定的的类型时会发生错误

所以我们可以给他设置一个默认值当数据类型空值时使用默认值 

当传递的值是对象时

父类

子类 

 

效果图

 

 给传递过来的对象设定默认值

当有多个对象需要传递时使用v-for

 

 

        

木与子不厌
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React中props传递数据
魂断@蓝桥的博客
12-29 820
组件的props 要接收组件外部的数据可以通过props来实现 props用来接收传递给组建的数据 数据的传递可以用给组件标签添加属性的方式 接收数据：函数组件可以通过参数props来接收数据，类组件可以通过this.props接收数据， 实例： 类组件传递数据： class Hello extends React.Component { render() { console.log(this.props); return ( <div&g.
VUE组件学习——props数据传递
sjh0112的博客
09-25 1634
VUE组件 最近用到了vue中父组件和子组件之间通信的相关知识，正好看书看到VUE组件这一章，在此记录一下 文章目录VUE组件前言一、注册二、数据传递1. porps 前言 vue组件可以理解为预先定义好行为的ViewModel类。一个组件可以预定义很多选项，但是最核心的还是一下几个： 1）模板（template）-----模板生命了数据和最终展示给用户的DOM之间的映射关系 2）初始数据（data）-----一个组件的初始数据状态。对于可复用的组件来说，通常是私有的状态 3）接受的外部参数（prop
props传递对象_vue-父组件传值props(对象)给子组件
weixin_39640883的博客
12-23 861
props传值大家都很清楚,###prps 可以传一个数字###prps 可以传一个布尔值###prps 可以传一个数组###prps 可以传一个对象###prps 可以传一个对象的所有属性今天就遇到了 在传对象时,所需要的问题.问题:1.从父组件传来了props['info'] // info 就是一个数组,每一项就是一个对象其中我需要用到info[0].id //这个值于是 我在mounte...
24.Vue中父子兄弟组件传递数据
weixin_43893483的博客
07-23 1565
父子组件、兄弟组件传递数据
vue2中父子组件通过props传递数据，父组件数据ajax异步更新，子组件数据不更新的问题解决
wangyinze123的博客
12-03 2736
解决方案1 在子组件中，watch监听props的动态值，设置deep的属性值为true（vue2官方文档中解释为：深度监听，每次属性值发生变化时，都会监听到）。在handler中执行子组件想处理数据的方法。 解决方案2 分析： 父子组件的生命周期顺序为：父beforeCreate - 父 created - 父beforeMounted-子beforeCreate - 子created - 子beforeMounte - 子mounted 父 mounted 。当父组件中mounted通过异步请求.
uni-app通过props传递值
最新发布
2403_86834756的博客
09-02 140
父类中使用子类方法中定义的名字进行传递值，可以看到我们现在只对第一个标签传递了一个张三在页面中也只显示了一个张三所以他是按照顺序进行传递的，你给第一个传那我就给第一个赋值。6.当然我们也可以通过变量进行赋值，使用变量可以让我们的代码更加的灵活，当然这是按照情况来的，使用变量时名字前面要加冒号不然他就会将name当做字符串的格式传递过去。9.这时候使用一个计算属性对它进行改造后在输出，页面上就直接使用修改后的变量了，这里可以看到在它后面添加的“@”符号也显示出来了。或者xx-mm的方式命名。
Vue组件： 自定义组件props传递数据
paopaosama的博客
09-13 2215
一、new一个Vue 二、Vue中使用自定义组件需要先注册组件 注册组件（其实就是定义组件）：可以注册全局组件，也可以注册局部组件。 三、btn是传参数的，在使用组建的时候可以传入不同的参数。 <body> <div id="app"> <lala btn="一个自定义组件"></lala> ...
React数据传递载体- props属性
DingDing_Zhang的博客
09-18 225
React数据传递载体 props 属性 state 状态 context 组件之间数据交互 props
【Vue】10.vue中父组件通过props属性向子组件传值
返璞归真
01-26 2380
在vue项目开发的过程中，经常会用到组件来管理不同的功能，有一些公共的组件会被提取出来，这时可能会产生一些疑问和需求？比如一个组件调用另外一个组件作为自己的组件，那么我们如何进行给子组件进行传值呢？ 基于这种情况，本篇就介绍一下vue开发中常用的三种传值方式，父传子，子传父，非父子组件传值。 PS：这也是面试中比较常见的题目~ 一、父传子，子传父 引用官网的一句话：父子组件的关系可以总结...
详解vue2父组件传递props异步数据到子组件的问题
08-30
Vue2 父组件传递 props 异步数据到子组件的问题解析 在 Vue 2 中，父组件传递 props 异步数据到子组件是一个常见的...Vue 2 父组件传递 props 异步数据到子组件的问题可以通过使用 v-if 指令或生命周期函数来解决。
父子组件分页的的props传递，如何把props中的值保存到data中
weixin_46463984的博客
09-13 2205
父子组件分页的的props传递 在封装一些组件的同时可能会夹杂着分页组件一起封装，这就面临一个问题，关于每次分页的当期页面的最新值，如何在父子组件中传递的问题。我也是最近开发遇到的困难，由于对vue的熟悉程度不够，网上的答案有时并不能解决值传递的问题。再次做一个关于父子组件分页的的props传递记录。以便帮助更多新学习vue的小伙伴参考。 基本的父子组件通信，父传子 父组件定义一组数据或单个数据，在引用子组建的时候传递值 使用 v-bind: 动态绑定 子组件使用props接收。 基本的父子组件通信，
Vue.js——vm.$props属性（用于接收上级组件向下传递的数据）
Jinnw的博客
04-06 1764
Vue.js——vm.$props属性（用于接收上级组件向下传递的数据）（ps：需要提前安装需要的插件和代码补全：html sinppet, vetur,Vue 2 Sinppets，vscode-vue2-snippet，以及需要下载vue.js）
在组件上使用 v-for：利用 props 传递数据（父组件传入子组件）
weixin_41796631的博客
10-20 9889
不使用组件的v-for 和 使用组件的 v-for 区别： 1. 可重复使用性： 组件是可以重复使用模板；  2. 触发事件的方法： 组件模板元素触发事件需要用 $emit，把自定义事件发射到html 层面上，html 再通过绑定自定义事件和实例中的函数将其触发； 而不使用组件时，直接可以在html 元素上通过v-on 绑定原生事件和实例中 （data、methods、comput...
vue 通过事件的形式调用全局组件
liux6687的博客
08-29 1600
通过vue.use 挂载组件，然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。这里我是写了一个文件上传组件。
vue ref和reactive区别
灰海
08-25 6597
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
Vue动态表头数据
lplovewjm的博客
08-27 648
本文主要解决场景：表头不固定、从后端数据中拿取表头并渲染到页面中。
class 2: vue.js 3 模板语法和内置指令
ComingLiu的博客
08-29 684
vue.js 3
vue3 自定义hooks（组合式函数）
咸鱼滚滚
08-26 1566
自定义hooks 是Vue3 组合式函数的别称。 在 Vue 应用的概念中，“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。
JavaScript数据类型
07-28
JavaScript数据类型包括字符串(String)、数字(Number)、布尔(Boolean)、对象(Object)、数组(Array)、空值(Undefined)和空引用(Null)等。\[1\]在JavaScript中，字符串是由一系列字符组成的，可以使用单引号或双引号表示。对象是一种复合数据类型，可以包含多个键值对。数组是一种特殊的对象，它以数字作为索引，存储多个值。数字可以是整数或浮点数，布尔值只有两个取值，即true和false。空值表示变量没有被赋值，而空引用表示变量的值为null，表示空对象。\[2\]在JavaScript中，可以通过typeof运算符来检测数据类型。此外，还可以通过拼接空字符串、使用toString()方法或拼接带参数的字符串来将数值型转化为字符串型。\[3\] #### 引用[.reference_title] - *1* [JavaScript数据类型](https://blog.csdn.net/huishi__/article/details/123454041)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* [JavaScript 学习手册二：JS 数据类型](https://blog.csdn.net/weixin_54327001/article/details/121964883)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] - *3* [JavaScript的七种数据类型](https://blog.csdn.net/Zhang_wang_yun/article/details/129959316)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值