<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component(‘modal‘, { template: ` <div> <p>first line</p> <p>last line</p> </div> ` }) var vm = new Vue({ el: ‘#app‘, }) </script> </body> </html>
我们先创建了一个vue的实例，并且注册了一个名为modal的全局组件。此时打开浏览器的话页面时没有内容的，我们注册的组件还没放进根实例中。
<div id="app"> <modal></modal> </div>
这时，我们把组件放进根实例中打开浏览器便有了效果。如下图所示：
一：单个插槽/匿名插槽
<body> <div id="app"> <modal>哈哈</modal> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component(‘modal‘, { template: ` <div> <p>first line</p> <div><slot></slot></div> <p>last line</p> </div> ` }) var vm = new Vue({ el: ‘#app‘, }) </script> </body>
我们在first line和last line之间写上一个slot，并在modal填上内容，此时内容就可以通过slot显示出来，我们写的<slot></slot>就叫做单个插槽。如下图所示：
我们也可以在modal之前写上标签并且编辑样式
<modal> <span style="color: red">哈哈</span> <span>呵呵</span> <h1>1234</h1> </modal>
如下图所示
二：但是，我们现在要想在我们的组件中再写一个插槽的话，将另外的内容放进第二个插槽里，我们还能这样写吗？
Vue.component(‘modal‘, { template: ` <div> <p>first line</p> <div><slot></slot></div> <p>last line</p> <slot></slot> </div> ` })
很显然，我们modal中的内容都显示在了我们的两个匿名插槽中。
这时，我们可以给我们的插槽取个名字，并且将我们modal中自定义的内容加上我们刚才的名字。
1 <div id="app"> 2 <modal> 3 <span style="color: red" slot="s1">哈哈</span> 4 <span slot="s1">呵呵</span> 5 <h1 slot="s2">1234</h1> 6 </modal> 7 </div> 8 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 9 <script> 10 Vue.component(‘modal‘, { 11 template: ` 12 <div> 13 <p>first line</p> 14 <div><slot name="s1"></slot></div> 15 <p>last line</p> 16 <slot name="s2"></slot> 17 </div> 18 ` 19 }) 20 21 var vm = new Vue({ 22 el: ‘#app‘, 23 }) 24 </script>
这个时候，我们自定义内容就分别显示在我们不同的插槽中啦。
三：作用域插槽
假设我们现在想要在插槽中显示动态数据，那么就要用到了作用域插槽。如下图，想在first line和last line中动态显示数据：
<body> <div id="app"> <modal> <template slot-scope="scope"> {{scope.msg}} </template> </modal> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> Vue.component(‘modal‘, { template: ` <div> <p>first line</p> <div><slot :msg="msg"></slot></div> <p>last line</p> </div> `, data () { return { msg: ‘111‘ } } }) var vm = new Vue({ el: ‘#app‘, }) </script> </body>
在modal组件中我们需要返回动态数据给插槽，在slot中我们要绑定data中的数据，并在父级modal中添加template，加上slot-scope指令，template中我们可以使用插值表达式显示内容。
原文：https://www.cnblogs.com/buqianqian/p/10982412.html
