Vue slot 插槽的使用

slot插槽作为分发内容的出口

假设看这篇文章的你已经有了一定的Vue组件基础

let btn = Vue.component('btn', {data() {return {}},template: `<button>1
</button>`})

上述代码创建了一个名为btn的全局组件。接下来我们在其他页面中调用这个插件

let vm = new Vue({el: '#app',data: {name: 'wxs'},template: `<div><btn></btn><btn></btn><btn></btn></div>`})

得到的页面效果如下

这样得到的所有插件都是前篇一律，很单调。

这时我们可以使用slot插槽来满足不同组件的需要。

我们在组件的button中加入slot，如下图所示

let btn = Vue.component('btn', {data() {return {}},template: `<button><slot></slot>
</button>`})

然后就可以对组件进行插值

let vm = new Vue({el: '#app',data: {name: 'wxs'},template: `<div><btn>1</btn><btn>2</btn><btn>3</btn></div>`})

得到的页面效果如下

以上就是slot最基本的用法，如果向往组件分发两个及以上的内容的话，我们需要用到更高级的具名插槽。