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

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是 react 性。它将响应 content 中的任何更新或更改.

更新:您似乎没有正确声明您的组件。参见 codepen link .如果您可以将任何其他组件声明为单个文件组件 就更好了，如here 所解释的那样.