详情页数据请求接口不需要放入钩子函数中

最新推荐文章于 2022-02-11 17:25:38 发布
最新推荐文章于 2022-02-11 17:25:38 发布
阅读量235 收藏
点赞数
文章标签： vue 钩子函数 created
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42445532/article/details/85786086
版权

在vue.js中，父组件和子组件模板是一起加载的，即父子组件的html是同一时间加载完成的。父组件中，获取表格页的数据时，将获取表格数据请求函数放入钩子函数中异步处理数据渲染dom元素。但是子组件的详情数据是要通过父组件的数据id进行获取，所以在子组件模板渲染完成之后，我还是不能获取子组件的详情数据，需要用户点击某条数据，传入某条数据id，获取到的数据才能渲染页面。所以子组件中获取数据请求函数不能放在钩子函数中。
在这里插入图片描述子组件数据请求不能放入钩子函数中
在这里插入图片描述父组件数据请求放入钩子函数中

一直美国兔朱迪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue获取接口id_vue 列表页跳转详情页获取id以及详情页通过id获取数据
weixin_39609503的博客
12-19 3156
1.先在router.js中配置路由{path: '/movieDetail/:movieId',name: 'movieDetail',component:movieDetail}2.获取详情页的id,并派发父组件事件(movieList.vue)页面。。。。。。。methods:{selectItem(item){//console.log(item.moveId);//var item = ...
通过GET方式获取到网络图片，有一个不知道为什么的错误
qq_45541497的博客
06-28 486
发送网络请求 首先任何网络操作，都不能在主线程中启动，只能在子线程里使用，这就考验使用Handler消息传送机制对主线程的ui进行操作 1.获取到网络操作限权 <uses-permission android:name="android.permission.INTERNET" /> 2.创建一个子线程进行网络操作 tijiao.setOnClickListener(new View.OnClickListener() { @Override public
【前端面试】Vue 你的接口请求一般放在哪个生命周期中？
Milk~每天分享一点点，技术进步一点点
09-30 9832
Vue你的接口请求一般放在哪个生命周期中？ 可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。 但是推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点： 能更快获取到服务端数据，减少页面loading 时间； ssr不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性； ...
vue在哪个勾子中发ajax请求
xpaqd的博客
09-05 1750
在created mounted 中发请求都是可以的 但是用户越早发越好 在created发，越早获取数据，在mounted实例挂载的时候渲染也就越及时。 如果涉及到需要页面加载完成之后的话就用mounted 在created的时候，视图中并没有渲染出来，无法操作html的dom节点 而在mounted中，已经完成挂载，可以直接操作dom节点 ...
使用Vue实现调用接口加载页面初始数据
10-16
今天小编就为大家分享一篇使用Vue实现调用接口加载页面初始数据，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue如何从接口请求数据
08-30
在上面的代码中，我们使用了created钩子函数来调用getImg方法，该方法将发送GET请求到指定的接口以获取数据。 methods 在Vue.js中，我们可以使用methods来定义一些可以被调用的函数。在上面的代码中，我们定义了...
解决Vue中mounted钩子函数获取节点高度出错问题
08-27
需要注意的是，使用 EventBus 可以实现组件之间的事件响应，但是需要使用 ref 属性来标识图片，并且需要在 mounted 钩子函数中使用 onload 事件来确保图片加载完成后再获取 offsetTop 值。 在实际开发中，我们可以...
vue.js动画中的js钩子函数的实现
10-18
本文将深入探讨Vue.js动画中的js钩子函数的实现。 首先，`<transition>`组件是Vue中处理过渡效果的核心元素。它允许我们在DOM元素的状态变化（如显示或隐藏）时添加过渡效果。在`<transition>`标签内，我们可以设置...
Vue指令的钩子函数使用方法
08-31
Vue指令的钩子函数使用方法是指在Vue框架中自定义指令时，使用钩子函数来定义指令的生命周期。钩子函数是指令的生命周期中重要的一部分，它们可以帮助开发者更好地控制指令的行为。 一、什么是钩子函数？ 钩子函数...
Vue 2.0中生命周期与钩子函数的一些理解
08-30
例如，在beforeCreate钩子函数中，我们可以执行一些初始化操作，在created钩子函数中，我们可以执行一些数据初始化操作，在mounted钩子函数中，我们可以执行一些DOM操作。 结语 Vue 2.0 中的生命周期和钩子函数是...
Vue的生命周期钩子函数和初始化页面在哪发送请求数据合适
，
02-11 2380
Vue的生命周期 vue生命周期 Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。 生命周期钩子函数 vue提前定义在组件生命周期各个阶段上，一旦发生到这个阶段，就会自动调用的函数。 包括: 4个阶段和8个钩子函数: ​ 创建组件对象前自动执行: beforeCreate() 1 创建阶段: ​ 创建组件对象后自动执行: created() ​ 将新HTML内
页面初始化钩子函数_最新Vue3.0文档翻译，setup函数的使用方法，掌握6个方面知识点...
weixin_33266588的博客
12-24 931
没人翻译，自己翻译：setupsetup函数是作为一个新的组件选项。它作为在组件内部使用Composition API的入口。一、调用时机创建组件实例时，并且props初始化解析完成后，setup函数立即调用。其能够智能性地选择在beforeCreate钩子之后而在created钩子之前调用。二、模板用法如果setup返回的是一个对象，该对象上的属性将合并到组件模板的渲染上下文中：请注意，setu...
vue点击列表传参进入详情页
weixin_43734732的博客
01-28 1万+
在列表页文件的methods方法中写跳转代码 methods: { handleWatch (row) { // console.log(row.activeJobId) this.$router.push({path: 'gd_detail/', query: {id: row.activeJobId}}) } 2.在详情页文件的methods方...
updated钩子函数实例化多次的问题
html_996的博客
03-25 785
继上篇文章继续补充一下 上一篇：添加链接描述 当我们的轮播需要添加 swiper-pagination 时，并且 添加一个数据双向绑定的 input 时， 我们会发现在我们改变 input 框里面的 value 时，我们的 swiper-pagination 按钮就不起作用了，原因是 updated 钩子函数被实例化多次 <!DOCTYPE html> <html lang=...
专题、分类、商品详情接口编写
chinalihua的博客
11-13 1243
2、模型关联–关联与查询
vue请求数据放在created好还是mounted里好
热门推荐
都是狠人的博客
05-31 2万+
vue请求数据放在created好还是mounted里好 建议放在created里 created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。 mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。 如果在mounted钩子函数中请求数据可能导致页面闪屏问题 其实就是加载时机问题，放在created里会比moun...
vue接口数据进详情页
_小郑有点困了的博客
03-17 628
vue接口数据进详情页 1，接口写法 2，从接口拿到数据，遍历数据到页面 3，进入详情页，地址栏传id 3.1 3.2
Nuxt2离开当前路由的钩子函数 我需要在这个钩子函数中清空vuex的数据
最新发布
06-06
你可以在Nuxt.js中使用`beforeRouteLeave`钩子函数来清空Vuex中的数据。在该钩子函数中，你可以通过调用Vuex store的action或mutation来清空数据。 以下是一个示例代码： ```javascript // 在你的组件中定义 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值