创建组件button

components/button.vue

<script>
export default {
    props:{
        type:{
            type:String,
            default:""
        },
        text:{
            type:String,
            default:""
        }
    },
    render(h) {
        //h：createElement
        return h('button',{
            //v-bind:class
            class:{
                'btn':true,
                'btn-success':this.type === 'success',
                'normal':!this.type
            },
            //dom属性
            domProps:{
                innerText:this.text || '未传入按钮文字'
            },
            //on => v-on
        })
    },
}
</script>
<style scoped>
.btn{
    width: 200px;
    height: 50px;
    line-height: 50px;
    background: green;
    border-radius: 7px;
    border: none;
}
.btn-success{
    background: goldenrod;
}
.normal{
    background: red;
}
</style>

使用

<template>
  <div class="home">
    <div>
      <Button :type="'success'" :text="'botton'" />
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Button from '@/components/button.vue'
export default {
  name: 'Home',
  components: {
    Button
  }
}
</script>