微信订阅号：Rabbit_svip
如果觉得Vue的组件已经非常方便的话，那么插槽 <slot> 会让组件超神。
插槽的主要作用是帮助我们更好的在其他组件中进行布局。当想要便携可重用的控件时尤为重要。
先上代码，通过代码能很直观的知道插槽到底有什么作用了。
<!-- HTML代码 -->
<div id="app">
<Quote>
<h2>{{quoteTitle}}</h2>
<p>A wonderful slot</p>
</Quote>
</div>
/* JS代码 */
var Quote = {
template: `
<div>
<slot></slot>
</div>
`}
new Vue({
el: '#app',
data: {
quoteTitle: 'This is Quote'
},
components: {
Quote
}
})
微信订阅号：Rabbit_svip
通过父组件调用子组件，然后在调用的过程中，在子组件内部放入内容，比如上面例子中插入了一些原生的html标签。
在子组件中，用 <slot> 标签接收。
最后中页面中输出的内容如上图所示，在Elements里，也可以看到html的布局。
以上就是在组件中插槽的最基本用法。
网友评论