Vue3 子组件生命周期 里面取不到props的值【已解决】

这个是父组件

 props:['sku'],
         watch: {
            //正确给 cData 赋值的 方法
              sku: function(newVal,oldVal){
                this.sku_list = newVal.sku;  //newVal即是得到的数据
                console.log(this.sku_list);
               newVal&& this.list(); //newVal存在的话执行list函数
            }
        },

props:写你传的名字 我这里是sku

watch:监听你的数据是否有变化

我们子组件生命周期里面访问不到,是因为渲染页面时候子组件比父组件快,使用监听就好了

这是打印的数据

有帮助的话点点赞,有问题欢迎交流

补充:

如果遇到watch:失效的问题以下操作可以解决

watch:{
            data:{  //监听的数据
                handler(val, oldName){
                     
                      console.log(val)
                  },
                  immediate:true, 
              },
        },

设置一个immediate为true就可以了

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
在 `mounted` 生命周期中使用 `nextTick` 是为了确保组件已经渲染完成后再执行一些操作。但是,使用 `nextTick` 并不会影响您在 `mounted` 生命周期中获 `props`,因为 `props` 已经在组件创建、初始化和挂载过程中被解析和传递给组件了。 如果您在 `nextTick` 回调函数中还是无法获到 `props`,可能是因为使用了异步更新 `props` 的方式,例如通过 `setTimeout` 或者 `axios` 获数据之后再传递给组件。这种情况下,您可以在 `watch` 中监听 `props` 的变化,然后在变化时执行需要的操作。 以下是一个使用 `nextTick` 和 `watch` 的示例代码: ```vue <template> <div> <p>My name is {{ name }}</p> </div> </template> <script> export default { props: { id: { type: Number, required: true } }, data() { return { name: '' } }, mounted() { this.$nextTick(() => { console.log('Component is mounted') }) }, watch: { id(newValue, oldValue) { console.log('id is changed', newValue, oldValue) this.getNameById(newValue) } }, methods: { getNameById(id) { // 通过 axios 获数据并更新 name axios.get(`/api/user/${id}`) .then(res => { this.name = res.data.name }) } } } </script> ``` 在上面的代码中,我们使用 `watch` 监听 `id` 的变化,并在变化时调用 `getNameById` 方法更新 `name`。在 `mounted` 生命周期中,我们使用 `nextTick` 等待组件渲染完成后再执行回调函数。这样就可以在组件渲染完成后获到正确的 `props` 了。

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

沐卿゚

帅哥美女多多支持哦,希望能帮助

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

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

打赏作者

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

抵扣说明:

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

余额充值