组件封装(同组件复用)

复用内容页面(组件)

效果图

抛开烦恼,如下所示
由于标红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传参
  props: {
    listNum: String,
    listNum1: String,
    listNum2: String,
     net1:{String },
  },
  created() { },
  methods:{
    // 把对应点击事件共享
    btnclick(){
      this.$emit('btnclick')
    },
    // 带参
    btnclick1(){
    this.$emit('btnclick1', this.list)
    // 如果对应的是input 双向绑定的值记得带参过去即可
    },
  }
};
</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()//弹出展示定义的ref保持一致
    }
  }
};
</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>