vue自定义组件与父子组件之间传值

Posted 2021-03-17 sinceforever

vue自定义组件与父子组件之间传值

<template>
  <div>
    <el-row :gutter="20" class="card-header">
      <span>{{ name }}</span>
    </el-row>
    <el-row class="cus-card-inform">
      <el-col :span="8" class="card-col-inform">
        <div class="card-number-unit">
          <span class="card-col-num">{{ policyNum}}</span>
          <span class="card-col-unit"> {{ unitone }}</span>
        </div>
        <p>{{ policytitle }}</p>
      </el-col>
      <el-col :span="2" class="card-col-line"></el-col>
      <el-col :span="14" class="card-col-inform">
        <div class="card-number-unit">
          <span class="card-col-num">{{ customer_total_premium }}</span>
          <span class="card-col-unit"> {{ unittwo }}</span>
        </div>
        <p>{{ totalcoast }}</p>
      </el-col>
      <el-col class="col-card-inform">
        <el-row :gutter="20" class="icon-inform-row">
          <el-col :span="8">
            <div @click="createEventClick()">
              <div class="image-inform">
                <el-image :src="iconImageOne" class="iconImage" ref="create-event"></el-image>
              </div>
              <p class="iconInform">{{ eventtitleone }}</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div @click="policyLetterClick()">
              <div class="image-inform">
                <el-image :src="iconImageTwo" class="iconImage" ref="customer-letter"></el-image>
              </div>
              <p class="iconInform">{{ eventtitletwo }}</p>
            </div>
          </el-col>
          <el-col :span="8">
            <div @click="memorabiliaClick()">
              <div class="image-inform">
                <el-image :src="iconImageThree" class="iconImage" ref="memor-abilia"></el-image>
              </div>
              <p class="iconInform">{{ eventtitlethree }}</p>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ""
    },
    policyNum: {
      type: String,
      default: ""
    },
    unitone: {
      type: String,
      default: ""
    },
    customer_total_premium: {
      type: String,
      default: ""
    },
    unittwo: {
      type: String,
      default: ""
    },
    policytitle: {
      type: String,
      default: ""
    },
    totalcoast: {
      type: String,
      default: ""
    },
    eventtitleone: {
      type: String,
      default: ""
    },
    eventtitletwo: {
      type: String,
      default: ""
    },
    eventtitlethree: {
      type: String,
      default: ""
    },
    iconImageOne: {
      type: String,
      default: ""
    },
    iconImageTwo: {
      type: String,
      default: ""
    },
    iconImageThree: {
      type: String,
      default: ""
    }
  },
  methods: {
    createEventClick: function() {
      let left = this.$refs["create-event"].$el.getBoundingClientRect().left
      let top = this.$refs["create-event"].$el.getBoundingClientRect().top
      let offsetHeight = this.$refs["create-event"].$el.offsetHeight
      let offsetWidth = this.$refs["create-event"].$el.offsetWidth
      let protocol = "createEventAction:";
      let parameter = {
        x: left,
        y: top,
        height: offsetHeight,
        width: offsetWidth
      };
      jsTooc.c3_navtive_user.doActionFunc(protocol, parameter, function(data){
      });
      console.log("createEventClick")
    },
    policyLetterClick: function() {
      let left = this.$refs["customer-letter"].$el.getBoundingClientRect().left
      let top = this.$refs["customer-letter"].$el.getBoundingClientRect().top
      let offsetHeight = this.$refs["customer-letter"].$el.offsetHeight
      let offsetWidth = this.$refs["customer-letter"].$el.offsetWidth
      // this.$refs.top.$el.offsetHeight
      let protocol = "customerLetterAction:";
      let parameter = {
        x: left,
        y: top,
        height: offsetHeight,
        width: offsetWidth
      };
      jsTooc.c3_navtive_user.doActionFunc(protocol, parameter, function(data){
      });

      console.log("policyLetterClick")
    },
    memorabiliaClick: function() {
      let left = this.$refs["memor-abilia"].$el.getBoundingClientRect().left
      let top = this.$refs["memor-abilia"].$el.getBoundingClientRect().top
      let offsetHeight = this.$refs["memor-abilia"].$el.offsetHeight
      let offsetWidth = this.$refs["memor-abilia"].$el.offsetWidth
      // this.$refs.top.$el.offsetHeight
      let protocol = "memorabiliaAction:";
      let parameter = {
        x: left,
        y: top,
        height: offsetHeight,
        width: offsetWidth
      };
      jsTooc.c3_navtive_user.doActionFunc(protocol, parameter, function(data){
      });

      console.log("memorabiliaClick")
    }
  },
  // created() {
  //   this.$emit("createEventClick")
  // }
};
</script>

<style scoped>
.card-header {
  display: flex;
  align-items: center;
  margin: 0 !important;
}
.card-header span {
  font-family: ‘PingFangSC-Semibold‘;
  font-size: .3rem;
  color: #554344;
}
.header-image {
  padding-right: .2rem;
  width: .5rem;
  height: .5rem;
}
.card-number-unit {
  display: flex;
  justify-content: center;
  align-items: baseline;
}
.cus-card-inform {
  padding-top: .1rem;
}
.col-card-inform {
  padding-top: .1rem;
}
.card-col-inform {
  text-align: center;
}
.card-col-num {
  font-size: .25rem;
  color: #d31145;
   font-family: "DINPro-Medium";
}
.card-col-unit {
  font-size: .14rem;
  color: #d31145;
}
.cus-card-inform p {
  /* width: 212px;
  height: 15px; */
  color: #685556;
  font-family: "PingFangSC-Medium";
  font-size: .12rem;
  font-weight: 400;
  line-height: .15rem;
  padding-top: 0.06rem;
}
.icon-inform-row {
  margin: 0 !important;
}
.iconImage {
  width: .39rem;
  height: .39rem;
}
.iconInform {
  color: #b8b8b8;
  font-family: "PingFangSC-Medium";
  font-size: .1rem;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-col-line {
  height: .3rem;
  border-right: 0.005rem solid #b3b3b3;
}
.image-inform {
 display: flex;
}
</style>

组件使用js部分代码：

<Card
  :name="name"
  :policyNum="policyNum"
  unitone="件"
  :customer_total_premium="customer_total_premium"
  unittwo="元"
  policytitle="保单总数"
  totalcoast="累计年缴保费"
  eventtitleone="创建事件"
  eventtitletwo="客户信"
  eventtitlethree="大事记"
  :iconImageOne="iconImageOne"
  :iconImageTwo="iconImageTwo"
  :iconImageThree="iconImageThree"
></Card>

• 自定义组件中用到父子组件传值