VUE 父组件给子组件传值 ，子组件有时渲染成功，有时渲染失败

已于 2022-03-21 16:15:02 修改
阅读量2.4k 收藏 4
点赞数 1
文章标签： vue.js elementui
于 2022-03-21 16:13:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42580967/article/details/123637835
版权

最近在写一块功能，前后端都写，因为功能比较简单几乎都是CRUD,后端没花多少时间就写好了，但是到了前端这就卡了我好久好久，情况是这样的：：我有一个主页面 里面需要有很多的对话框<dialog>,每个对话框里都有很多的表单或表格，那我就想啊把这些对话框里的内容给它封装成一个个子组件，这样主页面里的代码就不会太复杂了，

直接说问题：我把子组件装配到父组件里后，发现经常有时候子组件的页面渲染不到父组件传来的数据，我就面向百度编程查了一下，大概我了解的问题可能是vue生命周期的问题，子组件已经渲染完成了，却还没收到父组件传来的数据，就导致没渲染上，

解决方法：在子组件中使用watch去监听传过来的数据

用上watch后虽然问题解决了，但是控制台还是报错

 这个时候他又报找不到我 ievaluateAblity属性，我就在最外层嵌套了一个if 判断数据是否存在，就ok啦

weixin_42580967
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue父子组件传值，父组件值改变，值为空数组时子组件渲染失效
weixin_43242112的博客
07-20 3664
定义子组件，在使用子组件时，向子组件传递数组类型的参数，子组件接收到数组之后对数据进行渲染。 而父组件的数值是不断变化的，点击按钮一次，获取一次值。 当数组不为空时，正常渲染，但是数组为空时，会保留上一次渲染。 问题刚遇到的时候，在网上看了很多文章，自己也做了很多尝试。 一、尝试一 1.在父组件添加v-if判断，当数组为空时，不进行子组件的渲染。 虽然这个方式可以解决问题，但是在项目中大量使用了该组件，那就需要在使用子组件的时候大量的添加判断，这种做法直接pass。 二、尝试二 2.在子组件中添加监听
vue父组件给子组件传值，子组件不渲染的原因及解决方法
最新发布
预见的力量
01-05 2655
父组件传递给子组件的数据，如果是一个复杂对象（例如一个数组或对象），那么子组件只会监听对象的引用而不是对象的内容。这意味着当对象的内容发生变化时，子组件不会更新。3、数据发生变化后，在下面调用一下splice方法修改原数组长度（索引、截取长度都为0），数组不变，但视图可成功渲染。1、在子组件使用 watch 监听 props传过来的值，如果发现改变，调用forceUpdate刷新视图。2、父组件中声明一个布尔变量，数据发生变化后，切换一下变量状态，可刷新子组件视图。
vue父传子组件数据不渲染且报错
wingxabc的博客
11-12 1656
在vue开发过程中会遇到这样的一个问题，自己定义了一个组件，然后又定义了个子组件，父组件的数据需要将请求回来的数据传递给子组件，但是引入子组件在页面加载时就报错了，接口数据请求回来了也不渲染，这是因为接口请求和子组件渲染是同步的，子组件没有接收数据，父组件的接口数据请求回来时子组件已经创建好了虚拟dom，所以子组件报错，同时子组件里的prop不想响应的，所以不会再次更新dom，接口请求回来的数据也不会更新。 解决方法1：在子组件条件v-if，在接口请求回来后在渲染。 解决方式2：使用watch或者com
vue中router-view父子组件传值失败问题
Mr.Tang的博客
05-27 1517
index.vue 父组件： <router-view :teamId="teamId" /> 子组件： props:['crumbsList'] 1、先是父子 重点： 既然是父子组件传值 必须满足父子组件的条件 也就是router-view加载的路由页必须是children里的子路由 router/index.js { path: '/', component: Home, redirect: '/content/index', children: [{ pa
vue父组件向子组件传值，渲染成功但是报错，而且是刷新报错，代码更改不会
枫林晚风起
07-24 2304
1.问题 at Proxy.render (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-6900a511","hasScoped":true,"transformToRequire":{"video":["src","poster"],"source":"src","img":"...
vue 父子组件传值及不生效问题
sky_sunshine_x的博客
09-02 3698
1.父组件 <!--顶部--> <topHead :parent="testdata" v-if="testdata.length>0"></topHead> data() { return { testdata:[], }} methods: { //获取信息 getBannerList(){ getHone().then(response => { this.testda
vue 父组件给子组件传值子组件给父组件传值的实例代码
10-17
本篇将详细讲解Vue中的父子组件传值机制，包括父组件如何向子组件传递数据以及子组件如何向父组件反馈信息。 1. **父组件给子组件传值** 在Vue中，父组件向子组件传递数据主要是通过`props`属性实现的。首先，在...
vue父组件向子组件动态传值的两种方法
08-28
在 Vue 中，父组件向子组件传值是非常常见的场景。在本文中，我们将介绍两种方法来实现父组件向子组件动态传值。 方法一：使用 Props 传值 在 Vue 中，我们可以使用 props 将数据从父组件传递给子组件。 props 是...
vue 子组件向父组件传值方法
08-27
在组件化的开发模式下，有时我们需要将子组件的数据传递给父组件，以便在更高层级进行处理或显示。本文将详细讲解Vue子组件如何向父组件传递值。 一、使用自定义事件（$emit） Vue.js 提供了一种基于事件驱动的...
vue父组件异步获取数据传给子组件的方法
12-01
但是这还不够完美，子组件一般不直接使用父组件传来的值，二是监听一下，然后有变化了的时候再赋值给data，渲染的时候用data里的数据，这样就能保证随时动态更新数据  props: ['floorGoods'], data() { return{ ...
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
08-27
解决父组件中Vuex方法更新state子组件不能及时更新并渲染的问题，我们可以使用传值的方法将父组件的状态值传递给子组件，然后在子组件中使用watch或computed属性来监听页面的变化，并获取最新的状态值。
Vue框架下如何解决父组件修改数组传给子组件无法渲染问题
AJ_AJ的博客
12-27 1719
Vue框架下如何解决父组件修改数组传给子组件无法渲染问题 在公司遇到个需求，随着element tabs标签切换，form表单label值需要改变， 我想着这不是很简单吗，随手开发出form表单，一个tabs子组件，好戏来了， 我在父组件进行数据传递，当切换，我把数据进行修改传过去，问题来了，界面不渲染，一个个排查，打印一下控制台，嗯，数据变化了，怎么界面不渲染呢，我试着用this.forceup...
在父组件请求数据后传值给子组件时的页面渲染问题
前端小陈的成长记录
08-10 572
在父组件请求数据后传值给子组件时的页面渲染问题
Vue3父子组件传值踩坑点之——父组件异步获取数据，子组件接收到数据但没有渲染
m0_46627407的博客
07-06 9899
Vue3父子组件传值踩坑点之——父组件异步获取数据，子组件接收到数据但没有渲染
在vue父组件中调用方法并传值给子组件碰到的渲染问题
八块腹肌的博客
05-28 967
今天碰到这样一个问题，爷组件传值给父组件，父组件在传值给子组件，但是子组件并没有渲染出来，仔细排查后发现是父子组件生命周期的问题，下边贴上代码： // 爷爷组件 <father :value="value" /> export default { data() { return { value:null } }, created() { console.log("grandpa created") } mounted() { console.log("gran
vue3 父组件获取数据传值给子组件，子组件有值，但是不渲染
qcg14774125的博客
08-24 4769
问题所在就在于，父组件异步获取数据，传给子组件时候，子组件可能已经渲染出来了，所以数据虽然获取到了，但是并没有渲染。会发现有值，但是页面并没有渲染，这个时候就要用到watch监听传过来的值的数据变化。
vue 组件第一次不渲染问题_VUE的某些常见问题及解决方法
weixin_39738115的博客
12-28 3051
VUE的某些常见问题及解决方法双向绑定数据，界面未渲染？最近做vue项目的过程中，经常碰到会有双向绑定数据，data中定义的数据进行变动时，页面实际展示层未改变。常见的应用场景有下面几种：form表单里面，修改表单的时候，分明预置了数据，但是没有显示element-ui常用的select组件，下拉选择了一个元素，但是选中框中并没有显示自己写选中切换的组件，点击后触发active的样式，触发的字段为...
vue或者小程序父组件给子组件传值子组件没有渲染的问题
weixin_44840301的博客
12-30 986
父组件的值 data：{order：“123”，list:[{name:“1”}{name:“2”}]} 如果父组件的值不是单一的对象或数组，需要把数据单一化出来进行传递 data：{order：“123”} data2：[{name:"1"}{name:"2"}]
vue 组件第一次不渲染问题_解决Vue循环中子组件不实时更新的问题
weixin_35695434的博客
01-11 1660
问题描述使用Element-UI中的table组件时会遇到一个常见的问题。当在el-table中调用子组件的时候会出现数据更新后，子组件没有重新渲染的问题。 eg:资源列表中的健康度组件。 代码如下： {{scope.row.name}}理论上当我更新数据的时候，sourceData的值已经发生了改变(而不是其中的某个字段发生了改变)，子组件应该获取的数据更新并重新渲染。实际上该页面的健康度组件...
vue父组件给子组件传值，子组件不更新的情况有哪些
05-12
1. 父组件传递的属性没有发生变化：如果父组件传递给子组件的属性没有发生变化，子组件不会重新渲染。 2. 子组件的shouldComponentUpdate()方法返回false：如果子组件实现了shouldComponentUpdate()方法，并且该...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值