Vue encapsula componentes y modifica el estilo de los componentes pasando parámetros

significado

Vue es muy respetado por la mayoría de los front-end. Es muy importante que la encapsulación de componentes, pero cuando la encapsulación de componentes,Los componentes se pueden usar en todas partes, pero los estilos pueden ser diferentes en todas partes, por ejemplo: componentes de botón, ¿Qué hacer en este momento, es que los componentes con diferentes estilos pero la misma estructura se encapsulan varias veces? Evidentemente, es muy antieconómico.

Habla con código

Componente padre:

<template>
  <el-container class="layout_container">
    <el-header height="auto"><header-top></header-top></el-header>
    <el-container>
      <el-aside width="auto"><aside-left></aside-left></el-aside>
      <el-main>
        <zonghe-nengli></zonghe-nengli>
       /重点看此处：
        <my-button
          :title="biaoti"
          :color="activeColor"
          :size="fontSize"
        ></my-button>
        ///
        <skill-hot></skill-hot>
        <learning-path></learning-path>
        <bar-chart></bar-chart>
        <radar></radar>
        <tupu-fenxi></tupu-fenxi>
      </el-main>
    </el-container>
  </el-container>
</template>
<script>
import HeaderTop from "../../components/layout/header";

import MyButton from "../../components/common/button";

import AsideLeft from "../../components/layout/aside";
import ZongheNengli from "../../components/common/zonghenengli";
import Radar from "../../components/common/radar";
import TupuFenxi from "../../components/common/tupufenxi";
import SkillHot from "../../components/putong/skillhot";
import LearningPath from "../../components/putong/learningpath";
import BarChart from "../../components/common/barchart";
export default {
    
    
  components: {
    
    
    HeaderTop,
    AsideLeft,
    ZongheNengli,
    Radar,
    TupuFenxi,
    SkillHot,
    LearningPath,
    BarChart,
    MyButton,
  },
  data() {
    
    
    return {
    
    
    ///
      biaoti: 20,
      activeColor: "black",
      fontSize: 30,
   ///
    };
  },
  created() {
    
    },
  methods: {
    
    },
  computed: {
    
    },
};
</script>
<style scoped>
.layout_container {
    
    
  height: 100%;
}
.el-aside {
    
    
  margin-top: 21px;
  background: #ffffff;
  box-shadow: 0px 1px 13px 0px rgba(0, 0, 0, 0.35);
}
.el-main {
    
    
  margin-top: 40px;
  margin-left: 37px;
  background-color: burlywood;
}
</style>

Subcomponentes (énfasis en):

<template>
  <div class="button_container" :style="{color:activeColor,fontSize:fontSize + 'px'}">
    {
    
    {
    
     title }}
  </div>
</template>
<script>
export default {
    
    
  /接受传过来的参数
  props: ["title","color","size"],
  data() {
    
    
    return {
    
    
      activeColor: this.color,
      fontSize: this.size,
    };
  },
  created() {
    
    
    
  },
  methods: {
    
    },
  computed: {
    
    },
};
</script>
<style scoped>
.button_container {
    
    
  width: 207px;
  height: 60px;
  margin: 35px;
  line-height: 60px;
  text-align: center;
  background: #2e5afb;
  box-shadow: 3px 8px 17px 1px rgba(46, 90, 251, 0.6);
  border-radius: 6px;
}
</style>

Imagen de efecto:

Si desea encapsular un componente que pueda cambiar dinámicamente el estilo, debe dominar el enlace de clase y estilo del componente vue, para que pueda hacerlo con facilidad