vue 封装公共组件 学习 使用

封装 公共组件
在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;
}