vue自定义公共组件

1.建立MyBtn.vue文件

<template>
  <div :class='{my_button:true}' @click.stop='clickBtn'>
    <div class='btn' :style='{opacity : active ? 1 : 0.6}'>
      <span>{{text}}</span>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'myBtn',
    data(){
    },
    props: {
      text: {type: String, default: '自定义按钮'},
      active: {type: Boolean, default: false},
    },
    methods:{
      clickBtn(){
        this.$emit("clickBtn")
      }
    }
  }
</script>
<style scoped lang='scss'>
  .my_button{
    width: 100%;
    height: 3em;
  }
  .btn{
    width: 100%;
    height: 100%;
    display:flex;
    justify-content:center;
    align-items:center;
    background-image: linear-gradient(to right,#5DB2FF,#0C82F1);
    border-radius: 10px;
    color: #fff;
  }
</style>

2.建立components.js文件

import myBtn from './myBtn'
export {
  myBtn
}

3.页面中使用myBtn组件

<template>
  <div>
    <my-btn text='按钮' :active=false @clickBtn="clickBtn()"></my-btn>
  </div>
</template>

<script>
import myBtn from "components/myBtn.vue";
components: {
  myBtn
},
methods:{
  clickBtn(){
    console.log('按钮点击事件')
  },
},
</script>