1.子组件bigButton.vue

<template>
    <button :style="styleObject">
        <slot></slot>
    </button>
</template>
<script>
 export default {
    name: 'Button',
    data() {
        return {
        }
    },
    props:{
        width:{
            type:String
        }
    },
    computed:{
        styleObject:function(){
            return {
                width:this.width+'%'
            }
        }
    },
 }
</script>

2.父组件中使用

<v-bigbutton width="90">查看活动链接</v-bigbutton>
<script>
import bigbutton from '../../components/common/bigButton'

export default {
    components: {
        'v-bigbutton':bigbutton,
    },
}
</script>

 

Logo

前往低代码交流专区

更多推荐