记录vue3 defineProps 传值遇到的小问题

最新推荐文章于 2024-04-23 20:03:11 发布
最新推荐文章于 2024-04-23 20:03:11 发布
阅读量377 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48692423/article/details/133157800
版权

最近在项目中遇到一个小问题吧, 使用defineProps传值, 父组件传递给子组件的值, 可以接收到, 也可以在html内容中去使用, 但是你想打印这个值, 当父组件值变了, 你打印的还是第一次的值, 第一次是true, 你子组件打印的是true, 你父组件变成了 false, 你子组件打印的还是true

原本写法: 解构写法  会遇到上面的问题

解决:  不使用解构写法就好了

初秋拾陆
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
计算属性不能赋值，props不能赋值 ，state不能赋值
my_web_advanced的博客
07-28 1253
computed: { disableBtn() { return this.modifyForm.newModify? false: true } }, getVerificationCode() { // 点击获取验证码按钮 this.disableBtn = true; setTimeout(()=>{
vue3下props默认值设置
最新发布
qq_27700991的博客
05-02 1100
【代码】vue3下props默认值设置。
vue3中props的传值问题（传值失败，传值无法响应变化）
byebukesi的博客
09-22 9166
一般遇到父组件给子组件传值，props必不可少，但是在vue3中，有的人会遇到子组件接收到props中的值不会更新的情况，比如子组件的aa值并不会随着父组件中fatherData的变化而变化，甚至如果你的父组件中fatherData没有赋初始值，在子组件中props.sonData直接会是undifined。
Vue3 子组件生命周期 里面取不到props的值【已解决】
Leijiang0504的博客
03-09 3117
我们子组件生命周期里面访问不到，是因为渲染页面时候子组件比父组件快，使用监听就好了。props:写你传的名字 我这里是sku。watch:监听你的数据是否有变化。
vue3 setup语法通过defineProps获取props为null怎么办
2301_76513094的博客
05-06 4830
vue3 setup语法通过defineProps获取props为null怎么办
Vue3 子组件onmounted 里面取不到props的值
热门推荐
m0_59393112的博客
05-24 1万+
Vue3 子组件onmounted 里面取不到props的值，是因为子组件的页面渲染速度要超过了父组件向子组件传值的速度了，如果子组件初始化的时候要用到父组件传的值可以尝试下面三种方法： 1、对要取数据的代码进行延迟 setTimeout(() => { state.orderSn= props.orderInfo.orderSn getTimeDiff(); }, 50); 2、使用getCurrentInstance的mi...
Vue3 中 defineProps 怎么设置默认值？
良月柒
04-23 2303
这是一个常见的问题，特别是在开发过程中，我们希望能够为组件的属性提供一些默认值，以便在未传递属性值时能够有一个良好的备选方案。提供了灵活的方式来定义组件的属性，并且可以轻松设置默认值。通过设置默认值，我们可以确保即使用户未传递属性值，组件也能够正常工作，并且具备合理的默认行为。除了提供基本的默认值外，我们还可以使用函数来动态设置默认值。允许我们在组件中定义 props，并且可以指定它们的类型、默认值等属性。在这个示例中，我们通过一个函数来动态计算默认值。来定义组件的属性，但是如何设置这些属性的默认值呢？
解决Vue中 父子传值 数据丢失问题
10-16
主要介绍了解决Vue中 父子传值 数据丢失问题,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
vue3组件传值，父子兄弟组件传值
03-14
vue3父子组件传值，vue3组件传值，父子兄弟组件传值，props、emit、eventbus
解决vue组件props传值对象获取不到的问题
10-16
主要介绍了vue组件props传值,对象获取不到的问题,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue3父子组件传值.doc
02-05
本文将详细探讨Vue3中如何使用`setup`语法糖格式来实现父子组件的数据传递，包括`defineProps`和`defineEmits`这两个关键函数的用法。 ### 1. `defineProps`: 接收父组件传递的数据 在Vue3中，父组件向子组件传递...
vue父子模板传值问题解决方法案例分析
10-15
本文将深入探讨如何解决Vue父子模板间的传值问题，结合案例详细讲解其实现方法和步骤。 首先，我们需要了解Vue中父子组件通信的基本原理。在Vue中，父组件可以通过props向下传递数据给子组件，而子组件则通过事件...
Vue3 组件：父传值
weixin_55730337的博客
08-07 386
一个组件要想接受来自父组件的参数，需要显式声明。在使用的单文件组件中，props 可以使用宏来声明。
vue3的props属性打印不出来
poguanba的博客
09-28 898
在vue3中，我们经常会使用defineProps用给父组件传值给子组件，但是我们会发现props里接收父组件传过来的值，在子组件打印不出来，但是在template又可以显示出来，这样会导致传过来的值在子组件里面无法使用。如：传过来的值是flag。
vue中父传子，子组件页面里面有数据，console.log打印出来为空
qq_29124867的博客
01-07 3096
通过prop向子组件传值，使用该方法时，在我的项目中，得到的数据为空。我的代码如下 1、父组件引用子组件，filelookIds是通过axios请求向后台获取的数据 <file-list-look :fileLookId="filelookIds" /> 2、子组件通过props接收 ，在methods方法里面，打印console.log(this.fileLookId)为空，而在页面里面插入 {{fileLookId}}时就有数据 props:{ fileLookId:{
解决vue组件props传值对象在生命周期函数中获取不到的问题
qq_39784865的博客
05-06 1304
在Vue中，如果一个组件的props是一个对象，那么我们在组件中进行传递时，实际上是传递了一个指向同一个对象的引用，而不是传递了一个新的对象。因此，在组件内部修改该对象的属性时，会影响到所有引用该对象的地方，包括父组件和其他子组件。同时，在父组件中修改该对象的属性时，也会影响到该组件的props。为了解决这个问题，可以使用计算属性或者vue-watcher来监听props的变化，并在变化时重新赋值一个新的对象，而不是直接在原对象上进行修改。在上述示例中，我们首先通过计算属性。改变时，我们通过重新赋值。
vue3父组件异步props传值，子组件接收不到值问题
m0_62857167的博客
04-18 6737
vue3、props、watch
解决vue中父组件通过props向子组件传递数据，子组件接收不到
CYL_2021的博客
05-04 7723
问题：父组件在挂载时向后端发起请求获取数据，然后将获取到的数据传递给子组件，子组件想要在挂载时获取数据，获取不到
vue3 父子组件传值 defineProps
08-22
父子组件之间的值传递在 Vue 3 中可以通过 `defineProps` 和 `emit` 进行实现。 在子组件中，你可以使用 `defineProps` 来定义接收父组件传递的属性。例如： ```javascript // 子组件 Child.vue import { defineProps } from 'vue'; export default { props: { message: String }, setup(props) { // 使用 defineProps 定义接收的属性 defineProps({ message: { type: String, required: true } }); // 访问父组件传递的属性 console.log(props.message); return { // ... } } } ``` 在父组件中，你可以通过在子组件标签上使用 v-bind 或者直接传递值来传递属性。例如： ```html <template> <div> <child-component :message="parentMessage" /> </div> </template> <script> import ChildComponent from './Child.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent component' } } } </script> ``` 这样子组件就可以通过 `props.message` 访问到父组件传递的属性值了。 另外，如果你需要在子组件中修改父组件的值，可以通过使用 `emit` 来触发父组件中的事件。具体的用法可以参考 Vue 官方文档中关于事件处理的部分。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值