vue学习---slot-插槽使用

1，概念

• 父组件替换插槽的标签，但是内容由子组件提供。
• 插槽实质是对子组件的扩展，通过<slot>插槽向子组件内部指定位置传递内容

2，基本使用

<div id="app">
    <!-- 使用组件  -->
    <mycpn1>
        <span slot="center" style="color: red;">这个是中间标题</span>
        <button>替换没有指定名字的插槽</button>
    </mycpn1>
</div>
<template id="mycpn">
    <div>
        <h1>这个是头部</h1>
        <slot name="left"><span>左边</span></slot>
        <slot name="center"><span>中间</span></slot>
        <slot name="right"><span>右边</span></slot>
        <hr/>
        <slot>这个是没有指定名字的</slot>
    </div>
</template>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js" ></script>
<script>
 // 注册组件 全局
 Vue.component('mycpn1', {
    template:'#mycpn',
    data(){
        return {
            'title':'这是组件返回的数据',
        }
    },
})
 
 let app = new Vue({
     el:'#app',
     data:{
         fmessage:'这些是父级数据 通过props传递',
         fmovice:['鸡毛飞上天', '我的团长我的团', '盲井', '少林寺']
     }
 })
</script>

3，作用域插槽的使用

<div id="app">
    <!-- 使用组件  -->
    <mycpn1>
        <span slot="center" style="color: red;">这个是中间标题</span>
        <div slot="movies_box2" slot-scope="slot_2"> 
            <span>{{slot_2.data2.join(' ---- ')}}</span>
        </div>
    </mycpn1>
</div>
<template id="mycpn">
    <div>
        <h1>这个是头部</h1>
        <slot name="left"><span>左边</span></slot>
        <slot name="center"><span>中间</span></slot>
        <slot name="right"><span>右边</span></slot>
 
 
        <hr/>
        <slot :data2="movies" name="movies_box2">
            <ul>
                <li v-for="item in movies">{{item}}</li>
            </ul>
        </slot>
    
    </div>
</template>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js" ></script>
<script>
 // 注册组件 全局
 Vue.component('mycpn1', {
    template:'#mycpn',
    data(){
        return {
            'title':'这是组件返回的数据',
            'movies':[
                '你好李焕英', 'x战警','少林寺','这个什么电影'
            ]
        }
    },
})
 
 let app = new Vue({
     el:'#app',
     data:{
         fmessage:'这些是父级数据 通过props传递',
         fmovice:['鸡毛飞上天', '我的团长我的团', '盲井', '少林寺']
     }
 })
</script>