vue 模块 props

inbody.vue

<template>
    <div>
        <Breadcrumb :style="{margin: '24px 0'}">
            <BreadcrumbItem>{{mbx[0]}}</BreadcrumbItem>
            <BreadcrumbItem>{{mbx[1]}}</BreadcrumbItem>
            <BreadcrumbItem>{{mbx[2]}}</BreadcrumbItem>
        </Breadcrumb>
        <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
            <slot></slot>
        </Content>
    </div>
</template>

<script>
    export default {
        name: "inBody",
        props:{
            mbx:Array
        }
    }
</script>

<style scoped>

</style>

 

myButton.vue

<template>
    <div>
        <in-body :mbx="['首页','基础','Button']">
            <Button>Default</Button>
            <Button type="primary">Primary</Button>
            <Button type="dashed">Dashed</Button>
            <Button type="text">Text</Button>
            <br><br>
            <Button type="info">Info</Button>
            <Button type="success">Success</Button>
            <Button type="warning">Warning</Button>
            <Button type="error">Error</Button>
        </in-body>
    </div>
</template>

<script>
    import inBody from '../inBody'
    export default {
        name: "myButton"
        ,components:{
            inBody
        }
    }
</script>

<style scoped>

</style>