如何使用 Nuxt Js Vue js 更改组件 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',
      }
    }
}

如何使用 Nuxt Js Vue js 更改组件 css 的道具

How to change component css with props with Nuxt Js Vue js

css

vue.js

nuxt.js

vue-props