Vue.js父组件向子组件传值失败问题求助

嘿，我帮你排查出了几个导致数据无法传递给子组件的问题，咱们一个个来解决：

1. 子组件未声明接收Props #

这是最核心的问题：你的Service.vue里完全没有在<script>部分定义props来接收父组件传递的services数据。子组件根本不知道services这个变量的存在，自然没法在模板里使用它进行循环渲染。

2. App.vue中的组件名称拼写错误 #

你在App.vue的export default里写的是nam: 'App'，正确的属性名应该是name: 'App'——虽然这个错误不会直接导致props传递失败，但属于语法错误，最好修正。

3. 组件导入路径的规范问题 #

你导入Services组件时写的是import Services from "@/components/Service"，建议加上.vue后缀（即import Services from "@/components/Service.vue"），虽然部分构建工具支持省略后缀，但加上后代码更规范，避免潜在的路径识别问题。

修正后的App.vue代码 #

<template>
  <div class="app">
    <Header/>
    <div class="row">
      <div class="col-3">
        <Services v-bind:services="services"></Services>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "./components/Header.vue";
import Services from "@/components/Service.vue"; // 加上.vue后缀
export default {
  name: 'App', // 修正nam为name
  components: {
    Services,
    Header,
  },
  data: function () {
    return {
      services: [
        {
          title: "Logo flatdesign",
          description: "Je fais de super flatdesign",
          image: "https://fiverr-res.cloudinary.com/t_gig_cards_web_x2,q_auto,f_auto/gigs/22527722/original/3b5876ffb817872561d9eba6788dced76cb78224.jpg",
          price: 6.7,
          rate: 4,
          id:1
        },
        {
          title: "Logo rapide",
          description: "Je fais vite un logo",
          image: "https://fiverr-res.cloudinary.com/t_gig_cards_web_x2,q_auto,f_auto/gigs/142024147/original/2abc0f9433df4f98790707a591772e56bf8777a1.jpg",
          price: 5.5,
          rate: 3,
          id:2
        },
        {
          title: "Logo flatdesign",
          description: "Je fais de super flatdesign",
          image: "https://fiverr-res.cloudinary.com/t_gig_cards_web_x2,q_auto,f_auto/gigs/22527722/original/3b5876ffb817872561d9eba6788dced76cb78224.jpg",
          price: 6.7,
          rate: 4,
          id:3
        }
      ]
    }
  }
}
</script>

<style>
</style>

修正后的Service.vue代码 #

<template>
  <div class="home">
    <div class="row">
      <div class="col-3" v-for="service in services" v-bind:key="service.id">
        <div class="jumbotron">
          <img :src="service.image" height="100%" width="100%">
          <h4> {{service.title}} </h4>
          <div class="row">
            <div class="col rate"> {{service.rate}} ★ </div>
            <div class="col price"> {{service.price}} € </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 声明接收services属性，指定类型为数组并标记为必填
    services: {
      type: Array,
      required: true
    }
  }
}
</script>

<style scoped>
.rate{
  color: yellow;
}
.price{
  font-weight: bold;
}
</style>

完成这些修正后，父组件App.vue的services数据就能正确传递给子组件Service.vue了，子组件通过props接收后，就能正常在模板里循环渲染服务列表啦～

内容的提问来源于stack exchange，提问作者Hippie