組件傳參
通過給組件傳遞參數(shù), 可以讓組件變得更加可擴展, 組件內(nèi)使用props接收參數(shù)
export default { props: ['options'], data(){ return {} }}但是這個方法有局限性, 例如我寫了一個對話框組件, 對話框的內(nèi)容是自定義的
如果我只是顯示文字的話, 我可以簡單的將字符串傳進去props: ['message']
但是如果需要在其中添加一個按鈕的話, 這種方法就顯得很笨重了, 所以我們用另一種辦法 插槽
slot 插槽
slot的使用就像它的名字一樣, 在組件內(nèi)定義一塊空間, 取名為slotA
<div class="dialog"> 我是對話框 <slot name="slotA"></slot></div>
在組件外, 我們可以往插槽里填入任何元素, dialog-a為組件的名稱
<dialog-a :options="hello"> <template slot="slotA"> <button>按鈕</button> // ... 可以是任何元素 </template></dialog-a>
slot-scope 獲取插槽作用域
前面講的只是實現(xiàn)往組件內(nèi)加入元素, 但是并沒有和組件的數(shù)據(jù)有任何的交互
slot-scope的作用就是把組件內(nèi)的碼農(nóng)之家數(shù)據(jù)帶出來
<div class="dialog"> 我是對話框<br> {{message}} <slot name="slotA" :message="message"></slot></div>在組件外就可以得到其中的message
<dialog-a :options="hello"> <template slot="slotA" slot-scope="scope"> <button>{{scope.message}}</button> </template></dialog-a>ref 調(diào)用組件內(nèi)的方法
使用this.$refs找到組件后, 就可以調(diào)用其中methods中的方法
<dialog-a ref="dialogA"></dialog-a>
test(){ this.$refs.dialogA.func()}新聞熱點
疑難解答
