內建元件 -slot 父元件向子元件傳值
阿新 • • 發佈：2019-02-10
slot是標籤的內容擴充套件，也就是說你用slot就可以在自定義元件時傳遞給元件內容，元件接收內容並輸出。
先來定義一個<jspang></jspang>的元件，這個元件用來顯示博主的一些資訊。
我們在Vue 構造器裡的data中給出了資訊，資訊如下：（部落格地址，網名，使用技能）
| 1234567 | data:{jspangData:{bolgUrl:'http://jspang.com',netName:'技術胖',skill:'Web前端'}}, |
我們用<template></template>標籤的方式定義了元件：
| 12345678 | <template id |
我們現在就可以用slot功能讓元件接收傳遞過來的值，並在模板中接收顯示。
slot的使用需要兩步：
1、在HTML的元件中用slot屬性傳遞值。
| 12345 | <jspang><span slot="bolgUrl">{{jspangData.bolgUrl}}</span><span slot="netName">{{jspangData.netName}} |
2、在元件模板中用<slot></slot>標籤接收值。
| 12345678 | <template id="tmp"><div><p>部落格地址：<slot name="bolgUrl"></slot></p><p>網名：<slot name="netName"></slot></p><p>技術型別： |
我們貼出這個案例的全部程式碼：
| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849 | <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"> <script type="text/javascript"src="../assets/js/vue.js"></script><title>Slot content extend Demo</title></head><body><h1>Slot content extend Demo</h1><hr><div id="app"><jspang><span slot="bolgUrl">{{jspangData.bolgUrl}}</span><span slot="netName">{{jspangData.netName}}</span><span slot="skill">{{jspangData.skill}}</span></jspang></div><template id="tmp"><div><p>部落格地址：<slot name="bolgUrl"></slot></p><p>網名：<slot name="netName"></slot></p><p>技術型別：<slot name="skill"></slot></p></div></template> <script type="text/javascript">varjspang={template:'#tmp'}varapp=newVue({el:'#app',data:{jspangData:{bolgUrl:'http://jspang.com',netName:'技術胖',skill:'Web前端'}},components:{"jspang":jspang}})</script></body></html> |