在 Vue 3 中无法正确地将 props 传递给子组件答案

【问题标题】：Can't correctly pass the props to the child component in Vue 3在 Vue 3 中无法正确地将 props 传递给子组件
【发布时间】：2022-11-11 22:40:30
【问题描述】：

我想通过根组件中的 axios 将请求中的数据传递给使用 Vue 的子组件。不幸的是，只有一个字段正确显示 - “标题”。但我还需要输出“body”。

ps：这是我第一次使用Vue，想知道如何正确完成

应用程序.vue

<template>
    <app-news
    v-for="item in news"
    :key="item.id"
    :title="item.title"
    :id="item.id"
    :body="item.body"
    >
    </app-news>
</template>

export default {
  data () {
    return {
      news: []
}
  mounted() {
    axios
      .get('https://jsonplaceholder.typicode.com/posts?_start=0&_limit=5')
      .then((resp) =>
        this.news = resp.data
      )
  },
  provide () {
    return {
      title: 'List of all news:',
      news: this.news
    }
  },

应用新闻.vue

<template>
    <div>
            <hr/>
            <p v-for="item in news" :key="item.id">{{ item.body }}</p> // Need to pass here body content of the response from json
    </div>
</template>
     props: {
        news: [], // -> I think here the problem, I need to get the response as a prop and validate them as well, as shown below
          title: {
            type: String,
            required: true
          },
          id: {
            type: Number,
            required: true
          },
          body: {
            type: String,
            required: true
          },
        }
      },

【问题讨论】：

您不需要在组件中使用另一个 for 循环。
你可以直接得到身体。 bcz 它在道具中，无需循环只需打印 {{body}}。

标签： javascript vue.js vue-component vuejs3

【解决方案1】：

所以:title="item.title",:id="item.id" 和:body="item.body" 将作为道具传递。所以你不需要额外的道具，你可以直接使用那个变量。


<template>
    <div>
          {{title}} <br/> {{body}} <br/> {{id}}
    </div>
</template>

     props: {
          title: {
            type: String,
            required: true
          },
          id: {
            type: Number,
            required: true
          },
          body: {
            type: String,
            required: true
          },
        }
      },

【讨论】：

太棒了）感谢您的深入解释。

【解决方案2】：

您可以尝试如下 sn-p：

const app = Vue.createApp({
  data() {
    return {
      news: []
    }
  },
  async mounted() {
    const news = await axios
      .get('https://jsonplaceholder.typicode.com/posts?_start=0&_limit=5')
     this.news = news.data
  },
})
app.component('appNews', {
  template: `
    <div>
      <hr/>
      <p><b>{{ title }}<b></p>
      <p>{{ body }}</p> 
    </div>
  `,
  props: {
    title: {
      type: String,
      required: true
    },
    id: {
      type: Number,
      required: true
    },
    body: {
      type: String,
      required: true
    },
  }
})
app.mount('#demo')

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.3/axios.min.js" integrity="sha512-0qU9M9jfqPw6FKkPafM3gy2CBAvUWnYVOfNPDYKVuRTel1PrciTj+a9P3loJB+j0QmN2Y0JYQmkBBS8W+mbezg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
   <app-news
      v-for="item in news"
      :key="item.id"
      :title="item.title"
      :id="item.id"
      :body="item.body"
      >
    </app-news>
</div>

【讨论】：