Vue Slot插槽

   

<!--

内容分发

1， 两个特点

组件不知道自己要挂载的内容是什么

组件可能有自己的模板

组件是由：

props 传递参数

events 触发事件

slot 内容分发

构成

编译的作用域：

父组件的模板内容是在父组件作用域内编译，

子组件模板内容是在子组件作用域内编译

<child-component> {{message}}</child-component> // message是父组件的数据

slot分发的内容，作用域是在父组件上

单个Slot的作用

具名Slot

给slot元素指定一个name后可以分发多个内容.

具名Slot可以与单个Slot共存

访问Slot

vue 1.0 不考虑了

vue 2.0 提供了$slots

-->

 单个Slot

< one-slot >

< h3 >{{ fatherSlot}} </ h3 >

</ one-slot >

// one-slot.vue

<slot>

<!--

子组件slot内的备用内容，它的作用域是子组件本身

-->

< p >如果父组件没有传入的内容，我就是默认出现的内容 </ p >

</ slot >

 具名Slot

< named-slot >

< div slot= "title" >title </ div >

< div >container </ div >

< div slot= "footer" >footer </ div >

</ named-slot >

// named-slot.vue

< div >

< h3 >具名插槽 </ h3 >

<!--

如果没有指定默认的匿名slot。父组件多余的内容片断都将被抛弃

-->

< slot name= "title" ></ slot >

< slot ></ slot >

< slot name= "footer" ></ slot >

</ div >

 作用域Slot

<!--

作用域插槽是一种特殊的slot.使用一个可以复用的模板替换已渲染的元素

作用域插槽更具代表性的用例是列表组件，允许组件自定义如何渲染列表中的每一项

作用域插槽的作用是：既可以复用子组件的slot，又可以使slot内容不一样。

-->

< scop-slot :books=" books" >

<!-- <template scope="args"> since 2.5之后被替换了 -->

< template slot-scope= "args" >

<!--

args 相当于是个临时变量，template可以通过临时变量args,

来访问子组件插槽的数据

-->

< div >

< p >来自父组件的内容 </ p >

< p >{{ args. msg}} </ p >

< p >来自子组件的当前毫秒数:{{ args. nowDate}} </ p >

</ div >

</ template >

< template slot-scope= "props" slot= "book" >

< li >

<!--

li的内容渲染权由使用者掌握， 数据在子组件内获取

-->

< span >父组件 </ span >

< span >子组件:{{ props. bookName. name}} </ span >

</ li >

</ template >

</ scop-slot >

// scop-slot.vue

<slot msg="来自子组件的内容":nowDate="nowDate"></slot>

< ul >

< slot name= "book" v-for=" book in books" :book-name=" book" ></ slot >

</ ul >

 

转载于:https://www.cnblogs.com/niusan/p/10390351.html