Vue项目中 组件 compents的简单使用

子组件

Book.vue

<template>
  <li class="book">
    {{book.title}}
  </li>
</template>
<script>
  export default{
    props:['book'],
  }
</script>

这里是使用 props 参数接受父组件传递过来的参数

父组件

Books.vue

<template>
  <ul class="books">
    <Movie v-for="book of books"   :key="book.id" :movie="book"/>
  </ul>
</template>
<script>
  import Book from './Book.vue'
  export default {
    components:{
      Book,
    },
    data() {
      return {
        books: [{
            id: 0,
            title: 'red and black'
          },
          {
            id: 1,
            title: '1984'
          }
        ]
      }
    }
  }
</script>

引入组件

import Book from './Book.vue'
  export default {
    components:{
      Book,
    },
...
}

传递参数

<Book v-for="book of books"   :key="book.id" :movie="book"/>

 这里的 :movie="book" 是对应的子组件的  props:['book'],