首页 > 其他分享 >VUE:子组件的mounted中获取不到props中的值问题

VUE:子组件的mounted中获取不到props中的值问题

时间:2024-10-13 15:34:00浏览次数:1  
标签:VUE 对象 list props mounted true 监听

现象:

mounted读取list为空

断点放过去,界面却显示数据正常

处理:

props: {
    list: {
        type: Array
    }
},
watch: {
    list: {
         handler(newVal, oldVal) {
             console.log('init finish:', newVal)
             // 后续待处理写在这里
         },
         immediate: true, // immediate:true会立即先去执行里面的handler方法;用于在页面加载时就获取初始数据或者始化,而不是等页面加载完
         deep: true   // 默认值是 false,代表是否深度监听
    }
}

 

 修改后效果:

说明:

‌1、watch 深度监听是指监听一个对象的属性变化,包括该对象内部嵌套的对象或数组的变化。‌ 默认只监听对象属性变化,不包含内嵌对象

2、created可能也会出现相同问题

 

标签:VUE,对象,list,props,mounted,true,监听
From: https://www.cnblogs.com/leonlipfsj/p/18462432

相关文章

  • vue中上传xlsx表格文件,并获取文件json数据【前端文件上传】
    import*asXLSXfrom"xlsx";onMounted(function(){document.getElementById('fileInput').addEventListener('change',function(){constfileObj=this.files[0]//console.log(fileObj)//......
  • Vue学习笔记
    Vue概念:为什么学习Vue:更少的时间,干更多的活,开发网站速度快原生js---------------jQuery------------Vue案例:把数组数据–循环渲染到页面上原生js:<body><ulid="myul"></ul></body><script>letarr=['aa','bb','cc......
  • 基于SpringBoot+Vue的扶贫助农有机农产品商城【源码+安装+讲解+售后+开题+答辩PPT】
    【1】系统介绍①背景在快速发展的中国,农村经济虽受益于国家整体繁荣,但仍面临基础设施落后、信息闭塞及销售渠道狭窄等挑战,阻碍了优质农产品的市场拓展,影响农民收入。互联网与电商的兴起,为解决这一难题提供了新思路。它们能跨越地域界限,直接链接农户与消费者,简化销售流程,......
  • vue3 路由文件配置
    //通过模板路由配置import{createRouter,createWebHistory}from"vue-router";//创建路由器constroutes=[//登录路由{path:"/login",component:()=>import("../views/login/index.vue"),name:"......
  • 基于Springboot+Vue的学生毕业离校系统的设计与实现(源码+LW+包运行)
    限时福利:联系即免费送开题报告和任务书,欢迎咨询(可指定任意题目)源码获取:https://download.csdn.net/download/u011832806/89432081基于SpringBoot+Vue的学生毕业离校系统开发语言:Java数据库:MySQL技术:SpringBoot+MyBatis+Vue.js工具:IDEA/Ecilpse、Navicat、Maven系统演示......
  • vue跨标签页通信(或跨窗口)详细教程
    在Vue应用中,跨标签页(或跨窗口)的通信通常涉及到两个或多个浏览器标签页之间的信息共享。由于每个标签页或窗口都是独立的JavaScript执行环境,它们不能直接通过Vue或其他JavaScript库来直接相互通信。但是,有一些方法可以实现这种跨标签页的通信,主要依靠浏览器提供的WebA......
  • 008. vue组件的嵌套
    页面层级#1.main.ts引入App.文件import{createApp}from'vue'import'./style.css'importAppfrom'./简答组件的使用/App.vue'createApp(App).mount('#app')#2.定义Footer.vue<scriptsetuplang="ts"></......
  • 基于Node.js+vue个人理财系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景在当今复杂多变的经济环境中,个人理财已成为人们日常生活中不可或缺的一部分。随着金融市场的快速发展,各类投资产品层出不穷,如国债、股票、基金等,为投资者提......
  • 基于Node.js+vue房产管理系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着城市化进程的加速和房地产市场的发展,房产信息的有效管理和快速流通变得尤为重要。传统的房产管理方式,如纸质记录、人工查询等,不仅效率低下,而且容易出错,......
  • 基于Node.js+vue高校毕业生就业系统(开题+程序+论文) 计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着高等教育的普及和毕业生人数的逐年攀升,高校毕业生就业问题已成为社会关注的焦点。传统的就业服务模式,如校园招聘会、人才市场等,虽然在一定程度上促进了......