封装 公共组件

在vue 项目中 会有很多类似的内容 因公司 经常做支付这一块 像下面的类似的功能还有很多地方要用 因此尝试 一个很简单的小封装

//子组件 
 <div class="sub-pay">
      <div class="pay-left">
          <div class="total"><span>￥</span>{{payAmt}}</div>
          <div class="pay-amount">实付金额</div>
      </div>
      <div class="pay-right" @click="onPayBtn">
          {{btnname}}
      </div>
       <slot></slot>  //插槽 
  </div>

//子组件
export default {
  props: {  
    payAmt: {
      type: String,
      required: true
    },
    btnname: {
      type: String,
      required: true
    }
  },
  methods: {
    onPayBtn () {  //自定义事件
      this.$emit('clickBtn', true)
    }
  }
}

//父组件使用
 <subpay btnname = "立即支付" :payAmt = form.payAmt  @clickBtn="onPay" >
  //特殊情况下需要在子组件加内容 因在子组件已经加入slot 所以可以在子组件中加入内容
    <div class="pay-detail"> 
      <p>明细</p>
      <img src="/static/imgs/ico-up-arrow.png" alt="" >
    </div>
</subpay>

如果在父组件中想更改 子组件的样式 需要 使用深度作用选择器 用到 /deep/ 下面是使用方法

因为直接.sub-pay .pay-right{} 解析不到类名

.sub-pay/deep/.pay-right{
  background: #4D6AFF !important;
}