renderings
一般这种是使用一个组件来定义多个方法
picture
father
!<template>
<div class="main">
<div>
<card-panels
:icon-name="'机构'"
:list-num="'100px'"
:list-num1="'200px'"
:list-num2="'400px'"
>
</card-panels>
</div>
<div>
<card-panels
:icon-name="'机构数量'"
:list-num="'100%'"
:list-num1="'200%'"
:list-num2="'400%'"
>
</card-panels>
</div>
<div>
<card-panels
:icon-name="'稽查家数'"
:list-num="'1'"
:list-num1="'2'"
:list-num2="'4'"
>
</card-panels>
</div>
</div>
</template>
<script>
import cardPanels from "../components/different.vue";
export default {
data() {
return {
};
},
created() {
},
components: {
cardPanels,
},
methods: {
},
};
</script>
<style lang="scss" scoped>
.main {
display: flex;
justify-content: space-between;
div {
flex: 1;
height: 100vh;
border: 1px solid red;
}
}
</style>
Child
!<template>
<div class="main">
<!-- sec -->
<div class="sec">
<div class="login">
<img :src="src" />
</div>
<div>生产总数{
{
listNum}}</div>
<div>生产总数1{
{
listNum1}}</div>
<div>生产总数2{
{
listNum2}}</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
}
},
props:{
iconName: String,
listNum:String,
listNum1:String,
listNum2:String,
},
created(){
},
computed:{
src() {
return require(`../assets/image/title/${
this.iconName}.png`);
},
},
mounted:{
}
};
</script>
<style lang="scss" scoped>
.main {
.sec {
width: 100%;
height: 200px;
border: 1px solid red;
}
}
</style>
public image
<div class="login">
<img :src="src" />
</div>
computed:{
src() {
return require(`../assets/image/title/${
this.iconName}.png`);
},
},