账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Nuxt子组件内获取数据,无法渲染到页面吗?
    49
    0
    nuxt新手一枚,目前遇到以下困惑:在页面级组件中,使用asyncData可以很轻松获取数据并且渲染在页面中(网页源代码可查看内容)。如果该页面中包含子组件,比如常见的新闻详情页中会包含一些“其他推荐”或者“热门新闻”之类的内容,一般会放在子组件中进行处理。如果在新闻详情页中,通过asyncData方法用Promise.all把新闻内容以及热门新闻一起获取了,然后通过props方法把热门新闻内容传给热门新闻子组件,这样子完事大吉。async asyncData ({ params, $axios }) { const [info, hotnews] = await Promise.all([ $axios.$get('/news/detailFormat', { params: { news_id: params.id } }), $axios.$get('/news/hotList', { params: { page: 1, limit: 8 } }) ]) return { info: info.data, hotnews: hot.data } },但是如果热门新闻这个子组件,想在自己的组件内获取数据,而不是通过props从页面中接收数据。从官方文档中看出的一些端倪:https://nuxtjs.org/docs/featu...怎样在组件中使用asyncData,官方提到的3个方法:第三种方法就是上面提到的这种。我尝试了前两种方法,在子组件中获取数据:第一种:async fetch () { this.posts = await this.$axios.$get('/news/pageList', { params: { page: 1, limit: 8, city_id: 104 } }) console.log(this.posts) },能获取得到数据,但是服务端没有渲染。第二种:mounted () { this.getNews() }, methods: { async getNews (e) { const data = await this.$axios.$get('/news/pageList', { params: { page: 1, limit: 8, city_id: 104 } }) this.news = data.data } }也是能获取得到数据,但服务端还是没有渲染。请教各位大神,子组件内获取数据,一定没办法进行服务端渲染吗?如果想要服务端渲染,一定得使用上述的第一种方法吗?
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 独走孤獨城 普通会员 1楼

      是的,Nuxt子组件无法直接获取到数据并将其渲染到页面。这通常是因为Nuxt使用了SPA(单页应用)的模式,而SPA的数据通常是在服务器端渲染的。

      在SPA中,数据通常由服务器端提供,并通过中间件或路由将数据传递给子组件。子组件在接收到数据后,通常会通过Nuxt的API接口来获取和使用这些数据。

      如果你想在子组件内部直接获取数据并将其渲染到页面,你需要在子组件的created钩子函数中获取数据,然后在模板中使用这些数据。这通常需要使用模板的属性或属性引用来获取数据。

      以下是一个简单的例子:

      javascript export default { data() { return { data: 'Hello, world!' } }, mounted() { console.log(this.data); } }

      在这个例子中,当子组件被挂载到页面时,它会访问data属性并打印出'Hello, world!'

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部