slot插槽
Vue 实现了一套内容分发的 API,将 <slot> 元素作为承载分发内容的出口。使用slot插槽,可以更好的实现组件复用。
具名插槽
可以将内容进行细分,指定内容放置的插槽位置。
作用域插槽
可以让内容使用插槽中绑定的数据,而不是父级中的变量。
示例代码(参照上面的解释及代码注释理解代码)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插槽</title> <style> #app { width: 500px; margin: auto; border: 1px solid blue; border-radius: 10px; } #wrapper1, #wrapper2, #wrapper3 { width: 400px; margin: 20px auto; border: 1px solid red; border-radius: 8px; padding-left: 10px; } </style> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id="app"> <child1> <!--注意:要使用父级作用域中的变量,比如msg--> <h2>今日头条</h2> <p>详情{{msg}}</p> <p>新闻评论</p> </child1> <child2> <h1 slot="header">这是一个h1标题</h1> <h2 slot="main">这是一个h2标题</h2> <!--没有指定名字的,会插到没有名字的插槽中--> <p>这是一个标签,没有指定slot</p> <footer slot="footer">这是一个h5新增的footer标签</footer> </child2> <child3> <template slot-scope="prop"> <p>备注:没有slot-scope,那么该范围的变量都是父级作用域的,有slot-scope,那么相当于使用的是给slot中绑定的变量</p> <p>显示插槽中的text:{{prop.text}}</p> <p>显示插槽中的num:{{prop.num}}</p> </template> </child3> </div> </body> <template id="child1"> <div id="wrapper1"> <h1>这是子组件1</h1> <!-- 用来接收写到子组件标签内部的内容,放到slot当中 --> <slot>当你不写内容时,会显示</slot> </div> </template> <!--具名插槽--> <template id="child2"> <div id="wrapper2"> <slot name="header"></slot> <slot name="main"></slot> <slot></slot> <slot name="footer"></slot> </div> </template> <!--作用域插槽--> <template id="child3"> <div id="wrapper3"> <slot :text="szStr" :num="nNum"></slot> </div> </template> </html> <script> /* * 使用slot插槽,可以更好的实现组件复用 */ let child1 = { template: '#child1' }; let child2 = { template: '#child2' }; let child3 = { template: '#child3', data() { return { szStr: '幸福', nNum: 137 } } }; new Vue({ el: '#app', components: { child1, child2, child3 }, data: { msg: '+摘要' } }) </script>