vue子组件依赖父组件参数

在用vue写管理后台项目的时候一般会将项目分为三部分或者四部分;(扁平化的一般三部分)
title(表头)、left(菜单)、center(主体展示内容)、right (零碎展示比如聊天)

在这种情况下,是将这四部分分别写成一个组件,在父组件加载;

但是子组件会有依赖父组件的公共参数,但是考虑到异步加载、一般在父组件接口还没执行完毕,

子组件周期已经执行完毕了,子组件就会报错说拿不到父组件传的参数;

在这种情况下,就需要v-if 啦
可以在父组件定义一个参数,如果接口拿到参数了,改变这个参数、再加载子组件
或者存在store里


vue 父子组件周期:
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted。


 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue 3中的组件中获取组件的值,可以使用Vue依赖注入功能。下面是一种方法来实现: 1. 在组件中定义一个数据对象,并将要传递给组件的值存储在这个对象中: ```javascript export default { data() { return { parentData: 'Hello world' } } } ``` 2. 在组件的模板中,使用provide属性将数据对象注入到组件实例中: ```html <template> <div> <child-component></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, provide() { return { parentData: this.parentData } } } </script> ``` 3. 在组件中,使用inject属性来注入组件传递的数据对象,并通过访问这个对象来获取组件的值: ```html <template> <div> <p>{{ parentData }}</p> </div> </template> <script> export default { inject: ['parentData'] } </script> ``` 通过以上步骤,你可以在组件中使用`this.parentData`来获取组件的值。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [vue组件拿到它组件的数据的4种方法](https://blog.csdn.net/Xidian2850/article/details/130259962)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值