关于vue的插槽（slot）的学习笔记

看了vue官方的文档，关于slot的介绍显得很模糊。没看懂........ 于是并自己查了一些资料，自己学了一下。现在跟大家分享一下。  

Vue.component('test',{

  template:'<a>blank   <slot>my name is test</slot>   blank  </a>'

}

这里注册一个名叫test的组件。内设一个<slot>my name is test</slot>的插槽。先别着急什么意思，先看HTML代码

<test></test>

一个组件标签。 这样编译一下。

显示的内容为

blank my name is test  blank

这里没有任何对插槽的操作。很显然插槽跟占位符有点像,继续往下看，你就知道我为什么这么说了

接下来

<test><span>my name is span</span></test>

显示的内容为

blank my name is span  blank.

这里span代替了插槽。 这就是为什么说插槽跟占位符有点像的原因了

以上写的内容 只针对于只有一个插槽，  下文将描述多插槽的操作

Vue.component('test2',{

  template:'<a>blank   <slot name="test">my name is test</slot> <slot  name="test1>my name is test1</slot> blank  </a>'

}

html代码

<test2></test2>

编译结果

blank my name is test   my name is test1 blank

接下来

修改HTML代码

<test2>

    <span slot="test">my name is span</span>

    <span slot="test1">my name is span1</span>

<test2>

编译结果为

blank my name is span  my name is span1  blank 

这里 slot 为test的span代替了name=test的slot. slot为test1的span代替了name=test1的slot

看到这里，大家应该都明白了吧！！^_^