【转】[Vue] 父子组件示例

子组件代码片段：

<template>
    <div class="button" :class="[type, size]">
        a<slot></slot>
    </div>
</template>

<script>
const options = {
    props: ["type", "size"]
}

export default options;
</script>

<style scoped>
.button {
    text-align: center;
    border-radius: 5px;
    font-weight: bold;
    display: inline-block;
    margin: 2px 5px;
}

.primary {
    background-color: #1d6ef9;
    color: #b5e3f1;
}

.danger {
    background-color: #f96e1d;
    color: #b5e3f1;
}

.success {
    background-color: #a5cd4e;
    color: #b5e3f1;
}

.small {
    width: 40px;
    height: 20px;
    font-size: 10px;
    line-height: 20px;
}

.middle {
    width: 60px;
    height: 30px;
    font-size: 15px;
    line-height: 30px;
}

.large {
    width: 80px;
    height: 40px;
    font-size: 20px;
    line-height: 40px;
}
</style>

父组件代码片段：

<template>
    <div>
        <my-button type="primary" size="small">1</my-button>
        <my-button type="danger" size="middle">2</my-button>
        <my-button type="success" size="large">3</my-button>
    </div>
</template>

<script>
import MyButton from '../components/MyButton.vue';
const options = {
    components: {
        MyButton
    }
};
export default options;
</script>