内置组件 -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> ~~~