vue组件之slot插槽

关键词：slot

说明

为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个过程被称为 **内容分发 **Vue.js 实现了一个内容分发 API ，参照了当前 Web 组件规范草案，使用特殊的 <slot> 元素作为原始内容的插槽。

数据

    var vm = new Vue({
        el:"#box",
        data:{
            a:'秋风吹渭水',
            b:'落叶满长安',
            han:['思君令人老','岁月忽已晚','弃捐勿复道','努力加餐饭']
        },
        components:{
            "m-poem":{
                template:"#poem"
            }
        }
    })

模板

<template id="poem">
 <div> 
    <h1>汉乐府</h1>
    <slot>无名氏</slot>
    <slot name="ul-slot">待添加...</slot>
    <slot name="ol-slot">古诗十九首</slot>
    <slot></slot>
 </div> 
</template>

视图

    <div id="box">
        <m-poem>
        <p>{{b}}</p>
            <ol slot="ol-slot">
            <li v-for="item in han" v-text="item"></li >
            </ol>
            <p>{{a}}</p>
        </m-poem>
        <m-poem>
        </m-poem>
    </div>

slot插槽可不可以插入组件呢，我试了一下，也是可以的

<template id="title">
  <div>
    <h1>风景</h1>
    <p>洛阳城里花如雪</p>
    <p>洛阳花开动京城</p>  
  </div>
</template>

<script>
    Vue.component('m-title', {
     template:'#title'

  });

<div id="box">
        <m-poem>
        <m-title></m-title>
        </m-poem>
</div>