vue中父组件异步传值，渲染问题

hibiscusxin

于 2024-01-17 17:06:42 发布

阅读量741

点赞数 8

分类专栏： Vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_41838435/article/details/135655407

版权

Vue 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

vue中父组件异步传值，渲染问题

父组件异步传值，子组件渲染不出来。有如下两种解决方法：

1、用v-if解决，当父组件有数据才渲染

<Child v-if="dataList && dataList.length > 0" :data-list="dataList"></Child>

2、在子组件内监听数据，使用deep属性，在handler里面调用组件方法

watch: {
    dataList: {
        handle(val) {
            this.init();
        },
        deep: true,
        immediate: true
    }
}

在这里插入图片描述

参考链接：vue父组件异步数据子组件接收遇到的坑

优惠劵

hibiscusxin

关注关注

8
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
vue中父组件异步传值，渲染问题

父组件异步传值
复制链接

扫一扫

专栏目录

vue子组件拿父亲组件值并渲染到页面上

a17350322025的博客

11-25

842

Vue.component('my-component', { props: { // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默...

vue-子父组件传值源代码

06-29

一个自己搭建的项目，简单易学，包括子传父和父传子实例，也可看源码详情请见博客链接：https://blog.csdn.net/weixin_39332529/article/details/106985173

参与评论您还未登录，请先登录后发表或查看评论

在父组件请求数据后传值给子组件时的页面渲染问题

前端小陈的成长记录

08-10

503

在父组件请求数据后传值给子组件时的页面渲染问题

Vue 子组件接收到父组件传的值之后再渲染页面

LeeBingNing的博客

01-05

3282

渲染页面用到值options，而这个值是父组件请求接口得到并传给子组件的。所以有一定的耗时。渲染子组件页面时，options值还为null，就会报错Error in render: “TypeError: Cannot read property ‘options’ of null“ 解决方案：在template中用到options的地方，加v-if="options"，就可以先得到options值，后渲染页面。 ...

Vue等待父组件请求数据返回后，再渲染子组件

yongyafang123的博客

11-24

7208

问题描述：在写页面过程中有时子组件需要获取到父组件请求获得的数据后才能显示（比如：百度富文本的引用，回显数据的时候）想了很多办法最后看到这种比较可行，方便 <UE :defaultMsg=activityForm.introduction v-if="activityForm.introduction" :config=config ref="ue"></UE> 及...

vue父组件给子组件传值，子组件不渲染的原因及解决方法

最新发布

预见的力量

01-05

2054

父组件传递给子组件的数据，如果是一个复杂对象（例如一个数组或对象），那么子组件只会监听对象的引用而不是对象的内容。这意味着当对象的内容发生变化时，子组件不会更新。3、数据发生变化后，在下面调用一下splice方法修改原数组长度（索引、截取长度都为0），数组不变，但视图可成功渲染。1、在子组件使用 watch 监听 props传过来的值，如果发现改变，调用forceUpdate刷新视图。2、父组件中声明一个布尔变量，数据发生变化后，切换一下变量状态，可刷新子组件视图。

vue3 父组件获取数据传值给子组件，子组件有值，但是不渲染

qcg14774125的博客

08-24

4655

问题所在就在于，父组件异步获取数据，传给子组件时候，子组件可能已经渲染出来了，所以数据虽然获取到了，但是并没有渲染。会发现有值，但是页面并没有渲染，这个时候就要用到watch监听传过来的值的数据变化。

Vue3父子组件传值踩坑点之——父组件异步获取数据，子组件接收到数据但没有渲染

m0_46627407的博客

07-06

9687

Vue3父子组件传值踩坑点之——父组件异步获取数据，子组件接收到数据但没有渲染

vue3父组件异步获取后端数据，子组件无法及时渲染问题分析、解决及使用suspense组件进行骨架屏优化

reason125132的博客

05-04

8190

vue3中一个常见场景，父组件向后端异步获取数据，再父子传参给子组件，由子组件来渲染获取到的数据。

vue 父子组件生命周期执行/渲染顺序

weixin_45000761的博客

04-28

5144

在正常开发，挂载周期的执行顺序为：父beforeCreate => 父created => 父beforeMount => 子beforeCreate => 子created => 子beforeMount => 子mounted => 父mounted 在数据更新阶段执行顺序为：父beforeUpdate => 子beforeUpdate => 子updated => 父updated 在组件销毁阶段执行顺序为：父beforeDestroy

vue父组件向子组件动态传值的两种方法

08-28

主要介绍了vue父组件向子组件动态传值的两种方法 ,需要的朋友可以参考下

vue 子组件向父组件传值方法

08-27

下面小编就为大家分享一篇vue 子组件向父组件传值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue父组件给子组件传值

12-21

vue父组件给子组件传值

vue 父组件给子组件传值子组件给父组件传值的实例代码

10-17

主要介绍了vue 父组件给子组件传值，子组件给父组件传值,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下

vue父子组件渲染过程，超详细

飞翔的熊blabla

05-11

5803

这里vue的子组件引入有两中方式：同步和异步，因此父子组件加载的顺序是不一样的，接着往下看，会有收获的。一、同步引入例子： import Page from '@/components/page' 二、异步引入例子：const Page = () => import('@/components/page') 或者： const Page = resolve => require(['@/components/page'], page) image.png 同步引入时生

【vue】---子组件如何渲染到父组件中的?

m0_56349322的博客

03-27

1383

APP 父组件中引入 Left 子组件效果如下步骤： 001.在父组件中导入子组件 002.注册组件 003.在结构中使用组件组件的名称就是命名的 Left.vue 中的 Left

vue 子组件调用父页面或者组件进行传值渲染

bei199133的博客

05-11

510

vue 子组件调用父页面或者组件进行传值渲染 //子组件 props方式 Vue.component('app-manageattr', { template: '#app-manageattr', props: { enter: { type: Function, default: null } }, } methods: {

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

weixin_42580967的博客

03-21

2462

Error in callback for immediate watcher "evaluateForm": "TypeError: Cannot read properties of undefined (reading 'ievaluateAblity')" 父组件传值给子组件，子组件渲染失败

Vue 的组件加载顺序和渲染顺序

小草莓的博客

09-23

1809

综上所述，Vue 中组件的加载和渲染顺序是先加载父组件，再递归地加载子组件，然后按照深度优先遍历的方式渲染子组件，再依次向上渲染父组件。

vue3父子组件异步传值

08-15

在Vue3中，父组件向子组件异步传递值时，子组件可能在接收到数据之前就已经开始渲染，导致无法成功渲染异步数据。解决这个问题的方法是使用watch来监听props所接收到的数据，并在数据到达后进行渲染。在子组件的setup函数中，可以使用watch来监听props中的数据变化，然后在回调函数中进行相应的操作。例如，可以将接收到的数据赋值给一个变量，并在模板中使用该变量进行渲染。下面是一个示例代码： ```javascript <script setup> import { watch, ref } from 'vue'; const contentText = ref(''); watch(() => props.contentText, (newVal) => { contentText.value = newVal; }); </script> <template> <div>{{ contentText }}</div> </template> ``` 在这个示例中，子组件使用ref创建了一个名为contentText的响应式变量，用来存储接收到的数据。通过watch监听props.contentText的变化，在回调函数中将新值赋给contentText变量。然后在模板中使用contentText进行渲染。这样子组件就能够在接收到异步数据后正确地渲染出来。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue---父子组件传输异步数据](https://blog.csdn.net/wlijun_0808/article/details/125321751)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue3父组件异步props传值，子组件接收不到值问题](https://blog.csdn.net/m0_62857167/article/details/130224833)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交