父组件给子组件传CSS样式

最新推荐文章于 2024-09-27 14:51:42 发布

前端技术负责人

最新推荐文章于 2024-09-27 14:51:42 发布

阅读量4k

点赞数

分类专栏： web前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_43837268/article/details/95194152

版权

web前端专栏收录该内容

420 篇文章 10 订阅

订阅专栏

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>