vue学习笔记（五）：组件的重用

父组件代码：放在views文件夹中

<template>
  <div>
    <h1>
      父组件
    </h1>
　　<!--指定type和size，传值给组件-->
    <mybutton type="fail" size="middle" >按钮1</mybutton>
    <mybutton type="success" size="middle">按钮1</mybutton>
    <mybutton type="primary" size="middle">按钮1</mybutton>
  </div>
</template>

<script>
import mybutton from "../components/MyButton";
export default {
  components:{
    mybutton //如果属性名和属性值一样可以不写属性名
  }
}
</script>

组件代码：这里复用的是一个按钮组件，放在components文件夹中

<template>
      <div class="button" :class="[type,size]"> <!--注意在这里需要将scrpit中注册两个属性跟class绑定-->
        <slot></slot><!--slot占位替换作用，由使用时指定-->
      </div>
</template>

<script>
export default {
  //注册两个标签属性，type是按钮类型，size是按钮大小，使用的时候可以指定其值
  props:["type","size"]
}
</script>

<style scoped>
  .button{
    margin: 3px;
  }
  .primary{
    background-color: #1d6ef9;
    color:#b5e3f1
  }
  .fail{
    background-color: red;
    color:#ffffff;

  }
  .success{
    background-color: #42b983;
    color:#ffffff;

  }
  .small{
    width: 40px;
    height: 20px;
    font-size: 10px;
    line-height: 20px;
  }
  .middle{
    width: 50px;
    height: 25px;
    font-size: 14px;
    line-height: 25px;
  }
  .large{
    width: 60px;
    height: 30px;
    font-size: 18px;
    line-height: 30px;
  }
</style>