组件的编写

在项目中创建一个组件

1. 首先创建一个组件
2. 
3. 定义组件首字母建议大写
4. 输入vue选择下图中选中的代码模板
5. 

• 代码模板如下:

  <template>
  
  </template>
  
  <script>
  export default {
  
  }
  </script>
  
  <style>
  
  </style>

  组件代码编写

• 首先在template标签下必须要有一个唯一的父组件div。

例如编写Itembox.vue组件:

<template>
  <div class="box">
      <h1>子组件H1</h1>
      <p class="title">子组件p标签</p>
  </div>
</template>

<script>
export default {

}
</script>

<style>

h1{
    color:aquamarine;
    font-size:50px;
}
.title{
    color:gold;
    font-size: 30px;
}

</style>

• 子组件Itembox中第3、4行创建了H1标签，P标签
  

  调用组件

  在App.vue中调用Itembox.vue组件：

  <template>
  <div id="app">
    <h1>父组件H1</h1>
    <p class="title">父组件p标签{{name}}</p>
    <Itembox/>
  </div>
  </template>
  
  <script>
  import Itembox from '@/components/Itembox' // 导入组件,可以省略.vue后缀，会自动补齐
  
  export default { // App.vue为父组件，引用Itembox.vue子组件
  data () {
    return {
      name: '冒险岛好玩不花钱'
    }
  },
  components: { // 引入组件,和data函数同级
    Itembox // 给子组件定义一个名称，属性名和组件名相同时可以简写，只保留一个名称即可
  }
  }
  </script>
  
  <style>
  
  </style>

• 第10行首先导入组件Itembox至pp.vue
• 18-20行在export default中的components引入组件为子组件

测试页面:

可以看到成功调用组件。

scoped解决组件样式污染

在上面的例子中可以看到没有定义父组件H1和父组件标签p的样式，但是被子组件定义的h1和p的style所修改了，也就是子组件定义的样式影响了其他组件的样式，这样会造成样式混乱，而scoped就是用来解决这个问题的。

• 在子组件的style标签中添加scoped值，将样式声明成局部css

解决方法:
在子组件Itembox.vue中的style标签上声明局部css:

<style scoped>

h1{
    color:aquamarine;
    font-size:50px;
}
.title{
    color:gold;
    font-size: 30px;
}

</style>

• 第1行添加scoped

测试页面:

可以看到使用了scoped之后父组件的样式没有受到子组件的样式影响。

总结

• 为了避免子组件影响其他样式，使用scoped来声明局部组件。

组件样式优先级

• App.vue是根组件，在根组件中定义css样式，全局中没有专门定义过样式的标签默认采用根组件中定义的样式。
• 若在根组件中和子组件中对同一个标签定义不同样式，优先采用子组件定义的样式（符合定制化规则）。

补充