使用solt进行组件的封装

slot是官方直接封装好的组件 可以直接使用而不需要注册

body部分

    <div id="app">

        <el-button>默认按钮</el-button>

        <el-button type="primary">主要按钮</el-button>

        <el-button type="success">成功按钮</el-button>

        <el-button type="info" round>信息按钮</el-button>

        <el-button type="warning">警告按钮</el-button>

        <el-button type="danger" round>危险按钮</el-button>

    </div>

script部分

<script src="vue.min.js"></script>

Vue.component('el-button', {

        props: {

            type: {

                default: 'default',

                type: String

            },

            round: {

                type: Boolean,

                default: false

            }

        },

        template: `

            <button type="button" :class="['btn','btn-'+type, {'round': round}]">

                <slot></slot>    

            </button>

        `

    })

    new Vue({

        el: "#app",

    })

css部分

<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">

vue.min.js可进入官方下载