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;
}