vue 父组件传的值,子组件模板中能渲染,但是mounted不能打印

问题:vue 父组件传的值,子组件模板中能渲染,但是mounted打印出来为空,

<template><div class="manage_page fillcontain"><Test :datas="array" /></div>
</template><script>
import Test from '../components/test.vue'export default {computed: {defaultActive: function(){return this.$route.path.replace('/', '');}},components:{Test},data(){return {array:[]}},mounted(){// 模拟调接口setTimeout(()=>{this.array = ['a','b','c','d','e','f']})},methods:{}}
</script><style lang="less" scoped>@import '../style/mixin';.manage_page{}
</style>
<template><div><div v-for="item in datas" :key="item">{{ item }}</div></div>
</template>
<script>
export default {data() {return {};},props:{datas:{type:Array}},created(){console.log(this.datas); // 打印为空,在mounted一样},methods: {handleChange(value) {console.log(value);},},
};
</script>

原因: 这是因为子组件挂载的时候,值在父组件里也是为空的,后来父组件做了请求之类的工作后,更新了这个值然后往子组件里面传递,所以开始挂载的时候是值是空的,后来才有值,所以html看起来能渲染出来,实际它之前渲染过一次空的了,只不过两次时间间隔可能比较短。

解决的方法是用watch 来监听Props中的数据然后做出响应的操作

方法一、使用v-if ,等到父组件传值不为空时再传入

 <Test :datas="array" v-if="array.length" />

方法二、用watch 来监听Props中的数据然后做出响应的操作

  watch:{datas:{handler(val){if(val.length){console.log(val,'val');}}}},

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

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

相关文章

【Web】NodeJs相关例题wp

目录 ①[GKCTF 2020]ez三剑客-easynode ②[MoeCTF 2021]fake game ③[安洵杯 2020]Validator ④ [HZNUCTF 2023 final]eznode ⑤[CNSS] &#x1f3ed; EzPollution_pre ⑥[CNSS]✴️ EzPollution ①[GKCTF 2020]ez三剑客-easynode const express require(express); co…

如何缓解可观察性挑战?

可观察性正在成为当代 DevOps 实践的基石。即使传统上不属于 DevOps 的部门也看到了在可观察性团队的支持下带来的好处。然而&#xff0c;到 2023 年&#xff0c;组织发现采用之路比预期更加崎岖。以下是 DevOps 团队在可观察性方面面临的七个最大挑战以及一些缓解这些挑战的建…

数据结构 -- 并查集与图

目录 1.并查集 1.结构 2.原理 3.代码实现 1.存储 2.寻找根节点 3.是否为同一集合 4.求集合个数 5.合并为同一集合中 整体代码 2.图 1.基本知识 1.各个属性 2.特殊名词 3.图的解释 2.图的表示 1.邻接矩阵 2.邻接表 3.图的遍历 1.BFS--广度优先遍历 2.DFS--…

国家开放大学 平时练习题 作业参考题

试卷代号&#xff1a;1349 学前教育科研方法试题 参考&#xff08;开卷&#xff09; 一、单选题&#xff08;每题4分&#xff0c;共20分&#xff09; 1.下列关于测验与量表关系的表述中不正确的一项是( )。 A.一个好的测验必须有一个或一个以上的量表&#xff0c;才能…

Spark on yarn 模式的安装与部署

任务描述 本关任务&#xff1a; Spark on YARN 模式的安装与部署。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; Spark 部署模式的种类&#xff1b;Spark on YARN 模式的安装。 Spark 部署模式 Spark 部署模式主要分为以下几种&#xff0c;Spark Stand…

2021年2月1日 Go生态洞察:VS Code Go扩展中默认启用Gopls

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

rss服务搭建记录

layout: post title: RSS subtitle: vps搭建RSS服务 date: 2023-11-27 author: Sprint#51264 header-img: img/post-bg-universe.jpg catalog: true tags: - 折腾 文章目录 引言RSShub-dockerRSS-radarFreshrssFluent reader获取fever api配置Fluent Reader同步 结语 引言 一个…

IDEA设置方法注释模板

目录 一.打开设置&#xff1a;File—>Settings... 二.选择Live Templates—>点击右侧 "" 号—>选择Template Group... 三.输入组名称&#xff0c;建议取容易理解的名字&#xff0c;点击OK 四.选中创建好的组&#xff0c;再次点击 "" 号&#…

“大型”基础模型中幻觉的调查

Abstract 基础模型 (FM) 中的幻觉是指生成偏离事实或包含捏造信息的内容。这篇调查论文广泛概述了近期旨在识别、阐明和解决幻觉问题的努力&#xff0c;特别关注“大型”基础模型&#xff08;LFM&#xff09;。该论文对LFM特有的各种类型的幻觉现象进行了分类&#xff0c;并建…

fio 参数记录

常用的参数不多记录&#xff0c;主要记录下不太常用的参数&#xff0c;后续遇到再往上加 #io size 大小/比例&#xff0c;用冒号隔开 --bssplit4k/10:64k/50:32k/40 #下面这么写也是对的&#xff0c;代表 1k/32k 各25%&#xff0c;反正总计100% --bssplit4k/50:1k/:32k/# io s…

手撕A*算法(详解A*算法)

A*算法原理 全局路径规划算法&#xff0c;根据给定的起点和终点在全局地图上进行总体路径规划。 导航中使用A*算法计算出机器人到目标位置的最优路线&#xff0c;一般作为规划的参考路线 // 定义地图上的点 struct Point {int x,y; // 栅格行列Point(int x, int y):x(x),y(y){…

java学习part18抽象类

Java抽象类 详解-CSDN博客 111-面向对象(高级)-抽象类与抽象方法的使用_哔哩哔哩_bilibili 1.概念 2.抽象类 抽象类不能实例化&#xff0c;可以有属性&#xff0c;也可以有方法。 方法可以实现或者只声明不实现&#xff0c;要加一个abstract abstract class A{//定义一个抽…

springboot整合redis+自定义注解+反射+aop实现分布式锁

1.定义注解 import java.lang.annotation.*; import java.util.concurrent.TimeUnit;/** Author: best_liu* Description:* Date: 16:13 2023/9/4* Param * return **/ Retention(RetentionPolicy.RUNTIME) Target({ElementType.METHOD}) Documented public interface RedisLo…

详细学习Pyqt5中的5种布局方式

Pyqt5相关文章: 快速掌握Pyqt5的三种主窗口 快速掌握Pyqt5的2种弹簧 快速掌握Pyqt5的5种布局 快速弄懂Pyqt5的5种项目视图&#xff08;Item View&#xff09; 快速弄懂Pyqt5的4种项目部件&#xff08;Item Widget&#xff09; 快速掌握Pyqt5的6种按钮 快速掌握Pyqt5的10种容器&…

Go语言基础:包、函数、语句和注释解析

一个 Go 文件包含以下几个部分&#xff1a; 包声明导入包函数语句和表达式 看下面的代码&#xff0c;更好地理解它&#xff1a; 例子 package mainimport "fmt"func main() { fmt.Println("Hello World!") }例子解释 第 1 行&#xff1a; 在 Go 中&am…

基于SSM的仓库管理系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;Vue 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#xff1a;是 目录…

算法通关村第一关——链表经典问题之删除链表元素笔记

删除链表节点 总结一下高频常用的删除链表结点的情况&#xff0c;无论对链表进行何种操作&#xff0c;都需要精确查找和精确指向。另外&#xff0c;在删除链表节点时有一个很好用的技巧&#xff1a;虚头结点&#xff0c;将头结点的特殊性转化为一般&#xff0c;在后面具体阐述…

15个超级实用的Python操作,肯定有你意想不到的!

文章目录 1&#xff09;映射代理&#xff08;不可变字典&#xff09;2&#xff09;dict 对于类和对象是不同的3) any() 和 all()4) divmod()5) 使用格式化字符串轻松检查变量6) 我们可以将浮点数转换为比率7) 用globals()和locals()显示现有的全局/本地变量8) import() 函数9) …

Linux C语言 33-排序算法

Linux C语言 33-排序算法 本节关键字&#xff1a;C语言 排序算法 选择排序 冒泡排序 快速排序 相关C库函数&#xff1a; 冒泡排序 冒泡排序&#xff08;英语&#xff1a;Bubble Sort&#xff09;是一种简单的排序算法。它重复地走访过要排序的数列&#xff0c;一次比较两个元…

【LeetCode刷题】--90.子集II

90.子集II class Solution {public List<List<Integer>> subsetsWithDup(int[] nums) {List<List<Integer>> ans new ArrayList<>();List<Integer> list new ArrayList<>();//排序后便于去重Arrays.sort(nums);dfs(0,nums,ans,lis…