O Vue encapsula componentes e modifica o estilo dos componentes passando parâmetros

significado

O Vue é altamente respeitado pela maioria dos front-ends. É muito importante que o encapsulamento de componentes, mas quando o encapsulamento de componentes,Os componentes podem ser usados ​​em todos os lugares, mas os estilos podem ser diferentes em todos os lugares, por exemplo: componentes de botão, O que fazer neste momento, é que componentes com estilos diferentes, mas a mesma estrutura são encapsulados várias vezes? Obviamente, é muito antieconômico.

Fale com o código

Componente pai:

<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 (ênfase em):

<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>

Imagem do efeito:

Se você deseja encapsular um componente que pode alterar dinamicamente o estilo, você deve dominar a classe e a vinculação do estilo do componente vue, para que possa fazê-lo com facilidade