复用内容页面(组件)
效果图
抛开烦恼,如下所示
由于标红3块内容是大差不差的,这个时候我们可以定义一个共用的组件,
其次在对应总页面里面进行获取
定义共用的组件里面的内容为动态的数据
在总页面引入这个组件时 对应的数据分别填写即可
父
!<template>
<div class="main">
<card-panels
:list-num="'100px'"
:list-num1="'200px'"
:list-num2="'400px'"
@btnclick="btnclick"
@btnclick1="btnclick1"
>
</card-panels>
<card-panels
:net1="'#169bd5'"
:list-num="'100%'"
:list-num1="'200%'"
:list-num2="'400%'"
>
</card-panels>
<card-panels
:list-num="'1'"
:list-num1="'2'"
:list-num2="'4'"
>
</card-panels>
</div>
</template>
<script>
import cardPanels from "../../modules/cloud/1.vue";
export default {
data() {
return {};
},
created() {},
components: {
cardPanels,
},
methods: {
btnclick(e){
console.log(111111);
},
btnclick1(index){
console.log(index);
}
},
};
</script>
<style lang="scss" scoped>
.main {
display: flex;
justify-content: space-between;
}
</style>
子
!<template>
<div class="main">
<div class="sec">
<p :style="{'background':net1}">生产总数{{listNum}}
</p>
<p>生产总数1{{listNum1}}
</p>
<p>生产总数2{{listNum2}}
</p>
</div>
<br>
<div class="footer">
<button @click="btnclick">点击</button>
<button @click="btnclick1()">点击带参</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
list:'我是参数组件自带参数',
}
},
props: {
listNum: String,
listNum1: String,
listNum2: String,
net1:{String },
},
created() { },
methods:{
btnclick(){
this.$emit('btnclick')
},
btnclick1(){
this.$emit('btnclick1', this.list)
},
}
};
</script>
<style lang="less" scoped>
.main {
width: 100%;
height: 100vh;
.sec {
width: 300px;
height: 200px;
border: 1px solid red;
}
.footer{
position: absolute;
bottom: 0;
display: flex;
justify-content: space-between;
button{
margin: 0 20px;
}
}
}
</style>
公用图片
如果是共用图片
<div class="login">
<img :src="src" />
</div>
computed:{
src() {
return require(`../assets/image/title/${this.iconName}.png`);
},
},
复用弹窗页面(组件)
不要急,听我说,举个栗子
后管的话增删改查对应是不是都会有弹出框
当然了这些可以在页面共用一个弹出框,但是
我们要讲的是:
把弹窗拆分对应一个页面(也就是我们说的写一个组件,然后对应主页面进行调取)
废话不多说 直接上代码:
与页面不同是我需要考虑在父页面怎么点击展开弹框呢
用refo
父
!<template>
<div class="main">
<div class="sec">
<button @click="btnclick">点击弹出</button>
<dia :title="this.list" ref="dialog"></dia>
</div>
<br>
</div>
</template>
<script>
import dia from '../../modules/cloud/1.vue'
export default {
data() {
return {
list:'我是参数组件自带参数',
}
},
components:{
dia
},
methods:{
btnclick(){
this.$refs.dialog.openDialog()
}
}
};
</script>
<style lang="less" scoped>
.main {
}
</style>
子
<template>
<div class="main">
<el-dialog
:visible.sync="addDialog"
width="20%"
:close-on-click-modal="false">
<span>{{title}}</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
addDialog: false,
}
},
props: {
title: String
},
methods: {
openDialog() {
this.addDialog = true;
}}
}
</script>
<style lang="less" scoped>
/deep/.el-form-item__label {
text-align: left;
}
/deep/.el-form-item__content {
text-align: right;
}
.dialog-footer {
display: flex;
justify-content: space-between;
}
</style>