父组件给子组件传CSS样式

Vue父子组件使用示例

最新推荐文章于 2024-10-03 18:17:36 发布

原创最新推荐文章于 2024-10-03 18:17:36 发布 · 4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue

web前端专栏收录该内容

419 篇文章

订阅专栏

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>