vue中插槽slot

当特定的组件需要向里面传入特定的标签和内容，或者需要重复添加相同的内容

-----slot插槽：给模块占好位置，当使用组件名称的时候，自动的填充html内的内容。

1、普通的slot

html:
<div id="app">
	<child>
		<p slot="header">我是头部</p>
		<p slot="footer">我是底部</p>
	</child>
</div>
Vue.component('child',{
    template:`
        <div>
        	<slot name="header"></slot>
            <p>我是中间人</p>
            <slot name="footer"></slot>
        </div>
    `
});
new Vue ({
    el:'#app'
})

2、插槽作用域

slot-scope=“props” 是子组件传递给父组件接收的对象，把循环放在组件的插槽上，HTML的Dom直接展示数据。

//html
<div id="app">
      <child>
          <template   slot-scope="props">
              <li>{{props.item}}{{props.index}}</li>
          </template>
      </child>
</div>
//做出循环
Vue.component('child',{
    data:function(){
        return{
            arr:[1,2,3,4]
        }
    },
    template:`
        <div>
            <p>开始循环</p>
            <ul>
            <slot v-for="item in arr" :item=item>
            </slot>
            </ul>
        </div>
    `
});
new Vue ({
    el:'#app'
})