如何将对象数据从父组件传递到子组件？

Question

我想知道如何让内容对象在 video.vue 组件中可见。

这是 Video.vue 组件。这个组件是我想要访问 Home.vue 组件中定义的内容对象的地方。

<template>
  <div>
    <h1>{{title}}</h1>
  </div>
</template>

<script>
   export default {
     data() {
       return {
           title: 'Video Section'
       }
     }
   }
</script>

这是 Home.vue 组件：

   <template>
        <div class="container">
            <div class="column is-one-third" v-for="content in contents.results" :content="content" :key="content.id"> 
                <div v-show="loaded" class="loader"></div>
                <div class="card" >
                    <div class="card-image">
                        <figure class="image">
                            <img :src="imageUrl + content.backdrop_path" alt="Image">
                        </figure>
                    </div>
                    <div class="card-content">
                        <div class="media">
                            <div class="media-left">
                                <figure class="image is-25x25">
                                    <img id="poster-image" :src="imageUrl + content.poster_path" alt="Image">
                                </figure>
                            </div>
                            <div class="media-content">
                                <p id="movie-title" class="title is-4 no-padding">{{content.original_title}}</p>
                                <p><span class="title is-6"><i class="fas fa-star">{{" " + content.vote_average}}</i></span></p>
                                <p class="subtitle is-6"><i  class="fas fa-calendar-alt">{{" " + content.release_date}}</i></p>
                            </div>
                        </div>
                        <div class="content">
                            {{ content.overview }}
                            <div class="background-icon"><span class="icon-twitter"></span></div>
                        </div>

                        <div id="footer-card-icons">
                            <a href="#"><i class="fas fa-info-circle"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </template>

    <script>
       export default{
          data: () => ({
            contents: [],
            baseurl: 'https://api.themoviedb.org/3',
            apikey: '16667866c29ba1bc29e687b4892b8d5c',
            imageUrl: 'https://image.tmdb.org/t/p/w1280',
            loaded: true,
         }),

        created: function(){
           this.fetchData();
        },

        methods:{
          fetchData: function(){
            console.log('fetch data')
            this.$http.get(this.baseurl + '/discover/movie?api_key=' +
            this.apikey + '&sort_by=popularity.desc').then(response =>{
                this.contents = response.body;
                this.loaded = false;
            });
           }
        }
      }
 </script>

Answer 1

正如 Emile 所说，您应该使用 props 以便能够将数据从父组件传递到子组件。

在您的 Home.vue 中，添加：

<videos :content=“contents”></videos>

但如果你的contents 数据类型是Array：

<videos v-for=“content in contents” :key=“content.id” :content=“content”></videos>

注意，如果你使用v-for循环一个组件，你还需要添加key属性。

最后，在您的 Video.vue 中，您需要定义props，如下所示：

<template>
  <div>
    <p>{{ content.overview }}</p>
  </div>
</template>

<script>
   export default {
     props: [‘content’],
     data() {
       return {
           title: 'Video Section'
       }
     }
   }
</script>

请记住，props 是反应性。它将响应content 中的任何更新或更改。

更新：您似乎没有正确声明您的组件。见codepen link。如果您可以按照here 的说明将任何其他组件声明为单文件组件，那就更好了。