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> 元素作為承載內分發內容的出口