Vue内容分发的使用

官方文档对于这一块写的比较不好理解,也有点绕弯子.
在这写一点个人的理解,和使用姿势.....

个人对内容分发<slot>的理解可以看做是 占位符、标签替换、插槽
父组件中放入带有slot属性的内容，然后这些内容就会被分发到子组件中特殊的slot元素，根据name属性在子组件中重新组合、替换。

<!--父组件-->
<div id="parent">
    <child>
        <!--等待分发的内容-->
        <p slot="one">一些内容</p>  
        <p slot="two">另外一些内容</p>
        <p>不带slot属性的标签</p>
    </child>
</div>

<!--子组件-->
<div id="child">
    <slot><h1>默认替换不带slot的元素</h1></slot>
    <slot name="one">会被替换成父组件中slot="one"的元素</slot>
    <slot name="two">会被替换成父组件中slot="two"的元素</slot>
    <p>子组件自己的标签</p>
</div>

最后会被渲染成:
标签的顺序是根据子组件标签的顺序排列的,自行对照

<div>  
    <!--渲染后-->
    <p>不带slot属性的标签</p> 
    <p>一些内容</p> 
    <p>另外一些内容</p> 
    <p>子组件自己的标签</p>
</div>

如果父组件内没有那个不带slot属于的p标签, 则子组件内不带name属性的<slot>会显示标签内的内容,没有标签包裹.

<div>  
    <!--渲染后-->
    <h1>不带slot属性的标签</h1>
    <p>一些内容</p> 
    <p>另外一些内容</p> 
    <p>子组件自己的标签</p>
</div>

slot就是外部调用时会被外部替换掉，如果外部没有内容则显示自己的内容;

2.1.0 新增了作用域插槽

可以理解为，子组件可以将自己的数据发给父组件来处理

<!--子组件-->
<div id="child">
    <ul>
        <slot name="list" v-for="val in arr" :text="val"></slot>
    </ul>
</div>

data() { 
    return {
        arr:[1,2,3]
    } 
}

<!--父组件-->
<div id="parent">
    <Child>
       <template slot="list" scope="props">
           <li>{{ props.text + 1 }}</li>
       </template>
    </Child>
</div>

<!--最后渲染-->
<div id="child">
    <ul>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>