五、自定义组件

5-1 定义一个组件

/src/components/Item.vue
<template>
    <div>
        <img src="../images/bg.webp" alt="">
        <p>你好</p>
    </div>
</template>
<script>
export default {
    name:"MovieItem"
}
</script>
<style scoped>
</style>

5-2 App.vue中使用组件

import MovieItem from './components/Item'

5-3 在components属性中注册

export default {
    components:{
    MovieItem
  }
}

5-4使用

<MovieItem v-for="item of movies" :key="item.id"></MovieItem>

5-5 父组件向子组件传值

//1.给子组件定义一个data属性,接收父组件传递过来的参数
 <MovieItem :data="item"  v-for="item of movies" :key="item.id"></MovieItem>

//2.在子组件的props属性中接收
<script>
export default {
    name:"MovieItem",
    props:{
        data:{
            type:Object
        }
    }
}
</script>

//3.使用数据
<template>
    <div>
        <img :src="data.images.small" alt="">
        <p>{{data.title}}</p>
    </div>
</template>