一、vue中当数据在父组件需要给子组件传递数据的时候，子组件输出为undefined

父组件：

<Type :imgList="imgList"/>

子组件：

<img :src="imgList[0].imgUrl"/>

mounted() {console.log(this.imgList);  //
},

此时输出报错

原因：

出现上面的错误原因，由于vue是MVVM模式，会数据劫持，父组件传递过去的数据，子组件还没来得及接收，页面就已经渲染成功了，数据接收成功会再次渲染页面，所以页面渲染成功，依然有报错。

解决办法：

在父组件传递之前，将数据进行判断，如果为空就隐藏，有数据了再传过去，代码如下：

<Type :imgList="imgList" v-if="imgList"/>

二、父组件给子组件传递数据，子组件又给父组件传递对象|数组，如果设置默认值，出现警告

父组件：

<review-list v-for="item in reviewList" :key="item.id" :reviewList="item" @reply="replyFn"></review-list>

data() {return {reviewList: [{id: 0, name: "张三", content: "1"},{id: 1, name: "李四", content: "2"},{id: 2, name: "王五", content: "3"},]}
methods: {replyFn(data){alert(JSON.stringify(data))}},

子组件：

<p>{{ reviewList.name }}</p>
<p>{{ reviewList.content }}</p>
<button @click="replyData(reviewList)">回复</button>

props: {reviewList: {type: Object,default: function () {return {name: "嘻嘻嘻",content: "这是一个默认的值",};},},},
methods: {replyData(data) {// console.log(data);this.$emit("reply", data);},},

此时输出报错：

解决办法：

default: function () {return {name: "嘻嘻嘻",content: "这是一个默认的值",};
},

一、vue中当数据在父组件需要给子组件传递数据的时候，子组件输出为undefined相关推荐

设计数据层组件并在层间传递数据
Angela Crocker.Andy Olsen 和 Edward Jezierski Microsoft Corporation 2002年8月适用于: Microsoft® .NET ...
Vue 中 props 传值，父组件向子组件传递对象/数组可以直接修改的问题
vue 中父子组件通信最常用的方式是 props 和 $emit,所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行.这 ...
在Vue中使用eCharts的地图图表，及生成自定义地图数据（乡镇级）
如何在Vue中使用eCharts的地图图表,及如何生成自定义地图数据(乡镇级) 文章目录一.在Vue使用ECharts地图功能二.生成地图数据 1.安装Bigemap 程序 2.生成需要的各乡镇地 ...
主线程是如何向子线程传递数据的?_c++ 利用thread创建线程
用进行多线程开发小时候,老师总是教育我们上课要专心,"一心不可二用".可是CPU这个不听话的"熊孩子"偏偏却在一个芯片中加入了两个甚至多个运算核心,想要一&q ...
vue中使用微信jssdk语音聊天功能，实现语音输入内容的van-field输入框组件
一.配置项 1.绑定域名 2.引入JS文件前两步直接看官方文档 3.wx.config配置: 这边要注意有一个坑必须要注意一下:可能会遇到安卓系统配置正常,ios上面报签名无效配置失败. 如果是使用 ...
Vue中使用的el-upload开启multiple属性，但onSuccess部分数据status:uploading状态，影响图片回显
最近在后管vue项目中有个上传图片使用elementUI的el-upload组件要改为支持多选图片,本来是很简单的一个属性问题,但是在开启multiple多选属性后,发现onSuccess中的resp ...
Vue中使用js-audio-recorder插件实现录音功能并实现上传Blob数据到SpringBoot后台接口
场景浏览器web端实现语音消息录制并在录制结束之后将其上传到后台接口. 若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_霸道流氓气质的博客-CS ...
vue中在哪个生命周期中dom被渲染_vue请求数据放在哪个生命周期？
泻药! 玩vue.或者react或者其他任何mvvm库,很重要的一点是要弄清楚生命周期(不要太重要). 比如拿vue来说,每个生命周期提供的钩子函数,其实对应的是一个完整的vue实例(对象)诞生的过程 ...
在vue中使用echarts根据父级div大小自动适应大小
首先,你需要在组件中引入 ECharts.然后,你可以在组件的 mounted 钩子函数中初始化 ECharts 实例,并在组件的 template 中渲染 ECharts. 在 mounted 钩子 ...
【Vue+Mapbox】Vue中mapbox地图的使用（二）—— 自定义Geojson地图数据
很多时候,我们在使用地图的时候,用的并不是mapbox提供的底图,而是我们自己的数据. 这里以Geojson(json)数据为例. STEP 1 (数据定义) 将自己的数据加载,同时赋予名称. imp ...

一、vue中当数据在父组件需要给子组件传递数据的时候，子组件输出为undefined

二、父组件给子组件传递数据，子组件又给父组件传递对象|数组，如果设置默认值，出现警告

一、vue中当数据在父组件需要给子组件传递数据的时候，子组件输出为undefined相关推荐

最新文章

热门文章