使用props接收的数据，调用结果为空

最新推荐文章于 2025-05-02 17:03:36 发布
最新推荐文章于 2025-05-02 17:03:36 发布
阅读量5.5k 收藏 1
点赞数 3
分类专栏： vue框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/csdn_chengpeng/article/details/96854939
版权

在vue中，很多时候都要使用props来进行父子通信，可是代码里总会出现各式各样的问题。
使用props接收的数据，为什么在子组件中显示不出来？
原因是因为:
在数据还没有被赋值的时候，子组件就已经显示在页面上了，所以子组件是拿不到父组件里的数据的。
解决方法:
给子组件添加一个if判断 如果有这条数据，在显示该组件
在这里插入图片描述
如果你的数据类型是数组：

let echartData = [1,2,3];

<Echarts v-if='echartData.lengtn > 0' :echartData='echartData'></Echarts>

如果你的数据类型是对象：

let echartData = {a:1,b:2,c:3};

<Echarts v-if='echartData' :echartData='echartData'></Echarts>
vue中组件的props属性（详）
蜗牛~~
10-28 18万+
今天这篇文章，让你彻底学会props属性…… props主要用于组件的传值，他的工作就是为了接收外面传过来的数据，与data、el、ref是一个级别的配置项。
Vue中data传递函数、props接收函数及slot传参的用法
qq_42006353的博客
03-08 2896
Vue中data传递函数、props接收函数及slot传参的用法 1. data作为转换层 1.1 如下图中的代码，data作为转换成，作用为把引入的调用后端接口的方法函数传递给了子组件ac-cube 1.2 调用后端接口的方法函数如下所示 2. props接收传递过来的函数并把处理结果传回父组件 2.1 子组件ac-cube里props接收传递过来的函数，在mounted里通过this.$props.request.then(…)把接口返回的数据传递给cubeData。 2.2 子组件ac-cub
Vue 父组件通过 prop 传值给子组件 但子组件获取的值为空-解决记录
王清欢的博客
12-06 1万+
01 Bug 描述 笔者基于简化版的 vue-element-admin 前端框架 vue-admin-template 进行二次开发。 开发中遇到需要父组件向子组件传值的情景，笔者使用 Vue 官方文档提供的 通过 Prop 向子组件传递数据 的方法实现父组件向子组件的传值。但是在我的实例中，使用该方法传值，最终子组件获取到的数据为空值。 为了找到 Bug，我回顾了一遍通过 Prop 向子组件传递数据的过程： 02 通过 Prop 向子组件传递数据 笔者使用该方法实现父组件向子组件传值的过程如下： 父组件
vue3 setup语法通过defineProps获取props为null
weixin_45455337的博客
02-21 877
【代码】vue3 setup语法通过defineProps获取props为null。
vue2.x props 接收父组件传入的值
最新发布
monian187的博客
05-02 1075
vue2.x props 接收父组件传入的值
解决vue props 拿不到值的问题
10-18
今天小编就为大家分享一篇解决vue props 拿不到值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
关于Vue从后端拿到数据后props到子组件数值为空的问题
weixin_42555713的博客
09-23 2693
关于Vue从后端拿到数据后props到子组件数值为空的问题 当从后端拿到数据后，确实有数据 但是在子组件中props传值后 控制台打印props的值发现为空 是因为刚初始化的时候，默认introduces为空，props的值还没有被传输。我们可以 1.直接渲染或者遍历传进去的props。 2.建立一个watch，监听data中list变化，进行渲染 ...
【Vue3】setup通过defineProps获取props为null
qq_38196449的博客
05-08 708
其实原因很简单，defineProps只在setup语法糖中好使，也就是的方式
vue3 setup语法通过defineProps获取props为null怎么办
2301_76513094的博客
05-06 6020
vue3 setup语法通过defineProps获取props为null怎么办
vue 的props 子组件 操作数据为空
qq_52915322的博客
09-20 1714
vue 的props 子组件 操作数据为空
vue父组件向子组件(props)传递数据的方法
08-28
在子组件中，我们使用 `props` 选项来声明 propsname 属性，然后在模板中使用 `{{ propsname }}` 语法来显示传递过来的数据。 需要注意的是，使用 props 传递数据只能从父组件向子组件传递，子组件不能更新父组件...
props使用
小认真靖哥哥的博客
11-04 1173
props使用
（十二）vue.js组件——进阶篇之使用props传递数据（2）
默守的博客
11-12 4659
(1)为什么使用props 前面我们实现了通过组件把模板内容进行复用，这是不错的事情，但是我们却不希望在任何地方任何时候组件都是都是那样的一层不变。 我们更希望在不同的情况下，组件有不同的展现，这样它才是有趣的，更让我们喜欢的。 而要实现这个需要，就需要使用props了，他能让组件如同我们所知的js函数一样，在被使用时能够接收参数，并根据参数有不同的展现。 (2)使用props流程【数组形式】 要...
vue3，onMounted中获取不到props中的值
weixin_43785800的博客
04-16 2387
问题分析 1 传递时机：如果父组件在子组件挂载之后更新 props 的值，那么 onMounted 钩子中访问到的将是初始值（可能是undefined 或空值）。 2 父子组件同步问题：可能是父子组件的同步问题，导致 props 没有正确传递。 解决方法 1.父子组件同步问题，检查父子组件中传递参数的命名、语法 2.传递时机，推荐在onMounted获取props中的值，改为watch const props = defineProps({ id: { type: String, }, })
vue3中父组件数据通过异步请求得到后传给子组件是为空
hmxxhbjt的博客
04-01 1134
（请求可以写到store中的ts文件，然后在一进入项目时便调用），这种方法适用于以上两种方法无效，并且其他传参方法也无效时使用，毕竟这个方法中更适用于多个页面都有调用该请求的情况。1、使用v-if 来控制子组件是否开始挂载，我们在请求成功之后，所传字段有值时才开始选择挂载子组件。生命周期钩子是同步执行的，而向后端获取数据是异步的，如果在父组件的created中向后端异步获取数据，根据事件循环的顺序，子组件开始创建时是获取不到数据的。2、子组件中用watch更新要使用的数据。
vue3父组件异步props传值，子组件接收不到值问题
m0_62857167的博客
04-18 7393
vue3、props、watch
vue中props传值给data时-props有值但data却是空的问题
吕大瓜的博客
11-12 1万+
问题 设计vue组件时，常常有这样一个应用场景：父组件通过接口请求回来的数据传给子组件， 然后在子组件内部我们会用一个props来接收，并且将该props赋值给data里面的一个变量（便于我们后期对这个数据操作，如果直接修改props，vue会报错） 这样会有一个问题，就是组件接受到的props是有值的，但是赋给data里面的变量却是空的。 子组件 props: { title: {...
（详解）Vue设置select下拉框的默认选项（解决select空白的bug）
热门推荐
小安驾到的博客
09-19 1万+
解决用vue动态渲染select下拉框时，select下拉框会出现空白的bug
Vue prop 传递对象到子组件刷新页面数据消失
花开的博客
04-29 3331
Vue prop 传递对象到子组件刷新页面数据消失 父组件向子组件传递了一个对象，当页面我们直接刷新页面时发现子组件接收到的这个对象总的属性不见了。 父组件 <ArticlePublishForm :content="content" :article-id="editorArticleId" // 这个就是被传递的对象 :article-message="articleMessage" :title="title"
Vue 脚手架点击按钮后表格通过props接收数据并显示
03-26
假设您已经使用 Vue CLI 创建了项目并安装了需要的依赖，接下来是如何实现点击按钮后表格通过 props 接收数据并显示的步骤。 1. 创建一个子组件 Table.vue，该组件将通过 props 接收数据并渲染表格。 ``` <template> <div> <table> <thead> <tr> <th>名称</th> <th>价格</th> </tr> </thead> <tbody> <tr v-for="(item, index) in items" :key="index"> <td>{{ item.name }}</td> <td>{{ item.price }}</td> </tr> </tbody> </table> </div> </template> <script> export default { props: { items: Array, }, }; </script> ``` 2. 在父组件中定义数据源和方法，在点击按钮时调用方法获取数据并将数据传递给子组件 Table.vue。 ``` <template> <div> <button @click="getData">获取数据</button> <table-component :items="data"></table-component> </div> </template> <script> import Table from "./Table.vue"; export default { components: { TableComponent: Table, }, data() { return { data: [], }; }, methods: { getData() { // 假设数据源是一个数组 const newData = [ { name: "商品1", price: 10 }, { name: "商品2", price: 20 }, { name: "商品3", price: 30 }, ]; this.data = newData; }, }, }; </script> ``` 3. 在父组件中引入和使用子组件 Table.vue，将数据源作为 props 传递给子组件。 ``` <template> <div> <button @click="getData">获取数据</button> <table-component :items="data"></table-component> </div> </template> <script> import Table from "./Table.vue"; export default { components: { TableComponent: Table, }, data() { return { data: [], }; }, methods: { getData() { // 假设数据源是一个数组 const newData = [ { name: "商品1", price: 10 }, { name: "商品2", price: 20 }, { name: "商品3", price: 30 }, ]; this.data = newData; }, }, }; </script> ``` 现在您点击按钮就可以通过 props 接收数据并在子组件中渲染表格了。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

雾里桃花

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值