1、插槽在Vue中的作用和使用方法
必须在子组件的template中定义名为child的子组件，然后才能将内容添加到该子组件中，如下例所示。 不会渲染直接在父组件的child标签中定义的内容。
div id='root' child渲染需要插槽的内容p Dell/pplee/p/child/divscriptvue.com ponent (child )、{ template : }
使用插槽可以解决这个问题。 将slot元素占位符添加到子组件template时，将渲染父组件的" child "选项卡下的内容，上例中的子组件将更改如下：
vue.component(child )，{ template: `div p这是在部件中成功渲染的内容/p slot/slot /div` }的结果。
2、插槽默认内容
可以为插槽提供默认内容。 如果父组件不为此插槽提供内容，将显示默认内容。 如果父组件为此插槽提供内容，则默认内容将被替换
父组件是插槽的内容divid=' root ' child/child/divscriptvue.com ponent (' child '，{ template 3360 } divslotdefalutvalue//
父组件是插槽的内容divid=' root ' childphello/p/child/divscriptvue.com ponent (' child '，{ template 3360 ' divslotdefald }
3、命名插槽
如果需要多个插槽，可以使用slot的特性name。 可以使用此功能定义其他插槽
使用方法如下例所示
divid=' root ' childheaderslot=' header ' header/headerfooterslot=' footer/footer/child/divscriptvue
.component('child',{ template:`<div> <slot name="header">default header</slot> <div>content</div> <slot name="footer">default footer</slot> </div>` } ) var vm=new Vue({ el:'#root' }) </script>结果：
4、作用域插槽
可以先看一个例子，以便更好的理解作用域插槽的作用
在子组件中使用v-for创建一个列表循环，然后在父组件中通过子组件标签child调用，如下例。
<div id="root"> <child></child> <child></child> </div> <script> Vue.component('child',{ data: function(){ return { list:[1,2,3,4] } }, template: '<div><ul><li v-for="value in list">{{value}}</li></ul></div>', }) var vm=new Vue({ el: '#root' }) </script>结果：
调用了两次child组件，因为调用的是同一个子组件，所以显示的内容完全一样。如何在每次调用时能有各自的渲染效果？这就是作用域插槽的用武之地。
作用域插槽就是父组件在调用子组件的时候给子组件传了一个插槽，这个插槽为作用域插槽，该插槽必须放在template标签里面，同时声明从子组件接收的数据放在一个自定义属性内，并定义该数据的渲染方式。通过下列展示作用域插槽的使用方式：
<div id="root"> <child> <template slot-scope="props"><!--定义一个插槽，该插槽必须放在template标签内--> <li>{{props.value}}</li><--!定义使用渲染方式--> </template> </child> <child> <template slot-scope="props"> <h1>{{props.value}}</h1><!--定义不同的渲染方式--> </template> </child> </div> <script> Vue.component('child',{ data: function(){ return { list:[1,2,3,4] } }, template: `<div> <ul> <slot v-for="value in list" :value=value>//使用slot占位 </slot> </ul> </div>` }) var vm=new Vue({ el: '#root' }) </script>结果
通过上例可知，使用作用域插槽后，两次调用子组件可以定义不同的渲染方式。
slot-scope
如果一个 JavaScript 表达式在一个函数定义的参数位置有效，那么这个表达式实际上就可以被 slot-scope 接受。