Vue 之组件动态添加 Style 样式的四种写法全解析

2022-12-05 02:15:28

在 Vue.js 中动态地为组件添加样式：灵活性、可扩展性，和维护性

在 Vue.js 中创建和维护组件时，能够动态地添加和管理样式对于实现灵活、可扩展和易于维护的应用程序至关重要。Vue.js 提供了几种方法来实现这一目标，每种方法都有其独特的优点和缺点。在这篇博文中，我们将探讨在 Vue.js 中添加组件样式的四种主要方法：

一、Inline Style：简单粗暴，即时生效

使用 Inline Style，你可以在组件模板中直接定义样式，简单粗暴，即时生效，是最基础的方法。这对于快速创建具有简单样式的小组件非常有用。

<template>
  <div :style="{ color: 'red', fontSize: '20px' }">
    Hello World!
  </div>
</template>

二、Slot Style：灵活定制，组件共享

Slot Style 允许你将样式定义在父组件中，然后在子组件中通过 Slot 来引用这些样式，实现灵活定制和组件共享。这对于创建可重用组件非常有用，这些组件可以根据父组件的需求进行定制。

<template>
  <MyComponent>
    <template v-slot:style>
      <style>
        .child-component {
          color: blue;
          font-weight: bold;
        }
      </style>
    </template>
  </MyComponent>
</template>

三、Style Injection：全局样式，按需加载

Style Injection 可以在组件中动态地注入样式，从而实现全局样式的按需加载，减少样式文件的体积。这对于创建只在特定组件或页面上使用的样式非常有用，可以提升应用程序的性能。

import { injectStyles } from 'vue-style-injector'

export default {
  mounted() {
    injectStyles(`
      .global-style {
        color: green;
      }
    `)
  },
}

四、v-bind:style：动态绑定，实时更新

v-bind:style 指令可以动态绑定样式对象，从而实现组件样式的实时更新，非常适合需要根据数据变化来改变样式的情况。这对于创建交互式组件非常有用，这些组件可以响应用户的输入或应用程序状态的变化。

<template>
  <div v-bind:style="{ color: active ? 'red' : 'blue' }">
    Hello World!
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: false,
    }
  },
}
</script>