VUE封装组件

以制作一个按钮组件为例

先自定义一个组件（创建一个Button.vue文件）：

<template>
  <div class="sub-btn" @click="onSubmit">
    <div class="txt-btn">
      <slot name="btnText" class="txt-btn"></slot>
    </div>
  </div>
</template>
<script>
  export default {
    name: "Button",
    //props:['type','showstate'],需要传递的参数
  }
</script>
<style scoped>
.sub-btn{
  display:inline-block;
  border:solid 1px #58C7EE;
  transform: -moz-skew(-35deg);
  transform: -webkit-skew(-35deg);
  transform: -ms-skew(-35deg);
  transform: skew(-35deg);
  text-align:center;
  margin-top:30px;
  margin-bottom:30px;
  font-size:16px;
  padding:1px 28px 3px;
  position:relative;
  left:12px;
}
.txt-btn{
  color:#fff;
  line-height:29px;
  position:relative;
  transform: -moz-skew(35deg);
  transform: -webkit-skew(35deg);
  transform: -ms-skew(35deg);
  transform: skew(35deg);
}
</style>

2、使用组件之前首先需要引入：

import Button from '@/components/Button'//引入导航组件

3、调用组件：

<Button class="register-submit"><span slot="btnText" >提交</span></Button>