如何使用 Nuxt Js Vue js 使用 props 更改组件 css

Question

我是 Nuxt 和 Vue 的新手，感谢您的宽容 ;)。 我有一个“副标题”组件，我在另一个“主”组件中使用它（名称仅用于示例）。

如何从“主”组件更改“副标题”组件的css？

这里是“字幕”组件：

<template>
    <div>
       <h1 :class="data">{{ title }}</h1>
    </div>
</template>
<script>
export default {
    name: 'subtitle',
    props: {
        title: String,
    }
}
</script>

这里是我的“主要”组件：

<template>
    <div class="container">
        <Subtitle :title="title""></Subtitle>           
    </div>
</template>

我搜索了道具等......但现在我已经有一段时间了，我正在阻止。

感谢您的帮助！

Answer 1

你可以使用 props 和 computed 的组合来做到这一点

字幕组件

<template>
    <div>
       <h1 :style="getStyle">{{ title }}</h1>
    </div>
</template>
<script>
export default {
    name: 'subtitle',
    props: {
        stylings: Object,
    },
   computed: {
    getStyle() {
      return this.stylings;
    }
   }
}
</script>

主要组件

<template>
    <div class="container">
        <Subtitle :stylings="customStyle"></Subtitle>           
    </div>
</template>
export default {
    name: 'subtitle',
    data() {
        return {
          customStyle: {
              'font-weight': 'Bold',
      }
    }
}