의미
Vue는 대부분의 프런트 엔드에서 높은 평가를 받고 있습니다. 구성 요소를 캡슐화하는 것이 매우 중요하지만 구성 요소를 캡슐화 할 때구성 요소는 모든 곳에서 사용할 수 있지만 스타일은 모든 곳에서 다를 수 있습니다. 예 : 버튼 구성 요소, 지금해야 할 일은 스타일은 다르지만 동일한 구조를 가진 컴포넌트를 여러 번 캡슐화하는 것입니까? 분명히 그것은 매우 비 경제적입니다.
코드로 말하기
상위 구성 요소 :
<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>
하위 구성 요소 (강조) :
<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>
효과 사진 :
스타일을 동적으로 변경할 수있는 구성 요소를 캡슐화하려면 Vue 구성 요소의 클래스 및 스타일 바인딩을 마스터해야 쉽게 수행 할 수 있습니다.