二、vue组件

一、单个页面使用组件

1、定义一个组件

• 在Vue组件中，为了使样式私有化（模块化），不对全局造成污染，可以在style标签上添加scoped属性以表示它的只属于当下的模块，局部有效。 ```javascript /src/components/Item.vue

  <a name="lRl6q"></a>
  ### 2、app.vue中使用组件
  import MovieItem from './components/Item'
  <a name="9S0Iy"></a>
  ### 3、在components属性中注册
  ```javascript
  export default {
      components:{
      MovieItem
    }
  }

  4、使用

  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>

  二、多个页面使用组件

  又称全局引入组件
  在main.ts中
  
  使用：就可以直接在页面使用，不需要单独的引入和注册