vue solt內容分發/vue通用組件的封裝


1:props數據的傳遞,event事件的觸發和solt內容分發構成了vue組件的3個API來源,任何復雜的組件都是由這3個部分構成的

2:即Vue通過組件(針對可復用組件的解耦和樣式復用)的封裝分為三個部分:

①props:為了解耦,數據從父組件傳入,子組件本身不生成數據,即使生成了也只在組件內部使用

②event:在父組件中處理事件,比如clcik事件,邏輯放在父組件中,子組件只是承載,在子組件中用emit觸發父組件中的事件

③solt:當需要多個組件組合在一起使用,混合父組件的內容與子組件的模板時,就會用到solt,即內容分發。

④統一管理樣式表

例如:多個樣式基本相同按鈕的封裝,結果如下

父組件的代碼如下,父組件向子組件傳值。內容分發就是將父組件的內容放到子組件指定的位置。

<template>
  <div id="app">
    <aButton>按鈕</aButton>
    <aButton type="primary">按鈕</aButton>
    <aButton>按鈕</aButton>
    <aButton type="danger">按鈕</aButton>
    <aButton>按鈕</aButton>
  </div>
</template>

在子組件中,將 <solt></solt> 元素作為承載內分發內容的出口


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM