我想知道如何在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>
答案 0 :(得分:2)
正如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。