內置組件 -slot · web前端

slot是標簽的內容擴展，也就是說你用slot就可以在自定義組件時傳遞給組件內容，組件接收內容并輸出。先來定義一個`<jspang></jspang>`的組件，這個組件用來顯示博主的一些信息。我們在Vue 構造器里的data中給出了信息，信息如下：（博客地址，網名，使用技能） ~~~ data:{ jspangData:{ bolgUrl:'http://jspang.com', netName:'技術胖', skill:'Web前端' } }, ~~~ 我們用`<template></template>`標簽的方式定義了組件： ~~~ <template id="tmp"> <div> <p>博客地址：</p> <p>網名：</p> <p>技術類型：</p> </div> </template> ~~~ 我們現在就可以用slot功能讓組件接收傳遞過來的值，并在模板中接收顯示 slot的使用需要兩步： 1. 在HTML的組件中用slot屬性傳遞值 ~~~ <jspang> <span slot="bolgUrl">{{jspangData.bolgUrl}}</span> <span slot="netName">{{jspangData.netName}}</span> <span slot="skill">{{jspangData.skill}}</span> </jspang> ~~~ 2. 在組件模板中用`<slot></slot>`標簽接收值 ~~~ <template id="tmp"> <div> <p>博客地址：<slot name="bolgUrl"></slot></p> <p>網名：<slot name="netName"></slot></p> <p>技術類型：<slot name="skill"></slot></p> </div> </template> ~~~ ~~~ <body> <div id="app"> <jspang> <span slot="bolgUrl">{{jdxiaData.bolgUrl}}</span> <span slot="netName">{{jdxiaData.netName}}</span> <span slot="skill">{{jdxiaData.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> </body> <script type="text/javascript"> var jdxia = { template: '#tmp' }; var app = new Vue({ el: '#app', data: { jdxiaData: { bolgUrl: 'https://github.com/jdxia', netName: 'jdxia', skill: '后端' } }, components: { "jspang": jdxia } }); </script> ~~~