时间戳

首页 > 解决方案 > Vue.js 将数据发送到子组件并显示它们

javascript - Vue.js 将数据发送到子组件并显示它们

问题描述

嗨，我从 vue.js 开始，我不明白为什么我的信息没有发送到子组件。我尝试了几种不同的东西，但它不起作用。我想我没那么远，但我想不通： 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";

    export default {
        nam: 'App',
        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>

服务.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>
</script>

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

非常感谢你的帮助 ：） ！

标签： javascriptvue.js

解决方案

将此添加到您的子组件以在使用它之前script定义传递：prop

export default {
  name: "Service",
  props: ['services']
};

推荐阅读