关于vue中slot的使用

      刚开始看了官方的demo，利用注册component在父页面中的子组件标签中插入内容，达到灵活定制的目的。然而，确实不好理解，所以，就vue常用的组件与页面分开写的方式，我写了一个demo举例说明slot的作用。

      本人刚接触vue不就，感觉slot类似与一个内容占位符，在子页面中利用slot进行占位，在父页面调用时，使用不同的内容去填充这个占位符，从而达到一个组件，多个页面复用的目的。

     我们来看例子：

      1.首先是子组件 tempComp.vue

      

< template >

< div >

< p > child self </ p >

< slot name = "first" ></ slot >

</ div >

</ template >

< script >

export default {

}

</ script >

< style scoped>

</ style >

     2.再就是调用页面LocSlot.vue

< template >

< div >

< p > parent content </ p >

< tem-comp >

< div slot = "first" >

< ul >

< li > 1 </ li >

< li > 2 </ li >

< li > 3 </ li >

</ ul >

</ div >

</ tem-comp >

</ div >

</ template >

< script >

import temComp from './temComp.vue'

export default {

components: {

temComp

}

}

</ script >

< style scoped>

</ style >

好的，现在我们来说明一下，首先在tempComp中，<slot name="first"></slot>进行占位处理，这个地方允许，父页面中，<tempComp>标签间，名为slot="first"的内容进行显示。再来看我们的父页面，也就是调用页面，在标签中插入内容区域div，并给他命名为slot="first "去填充子组件的占位。

需要知道的是，默认情况下，父页面中的，子组件间加入的内容时不会显示的，除非有占位符这个东东。

当然，上面例子举出的是具有实际名字的slot占位，其实还有一种默认的占位slot，即不给子组件中的占位符slot进行命名即可。那么父页面中，默认会将子组件中的第一个插入内容放置在默认占位符的位子，但是，如果插入数量超过默认占位符数量，则剩余的部分就不显示了。