vue插槽

单个插槽(默认插槽)

<template>
    <div class="father">
        <h3>这里是父组件</h3>
        <son>
            <div class="tmpl">
              <span>xxxxxxxx</span>
            </div>
        </son>
    </div>
</template>

<script>
import son from '../components/son'
export default {
    data(){
        return{

        }
    },
    components: {
        son: son
    }
}
</script>

<template>
    <div class="child">
        <h3>这里是子组件</h3>
        <slot></slot>
    </div>
</template>

具名插槽：

<template>
    <div class="father">
        <h3>这里是父组件</h3>
        <son name="jmcx">
            <div class="tmpl">
              <span>xxxxxxxx</span>
            </div>
        </son>
    </div>
</template>

<script>
import son from '../components/son'
export default {
    data(){
        return{

        }
    },
    components: {
        son: son
    }
}
</script>

<template>
    <div class="child">
        <h3>这里是子组件</h3>
        <slot class="jmcx"></slot>
    </div>
</template>

作用域插槽：

<template>
    <div class="father">
        <h3>这里是父组件</h3>
        <son name="jmcx">
            <template slot-scope="user">
            <ul>
                <li v-for="(item, index) in user.data" :key="index">{{item}}</li>
            </ul>
            </template>
        </son>
    </div>
</template>

<script>
import son from '../components/son'
export default {
    data(){
        return{

        }
    },
    components: {
        son: son
    }
}
</script>

 

<template>
    <div class="child">
        <h3>这里是子组件</h3>
        <slot class="jmcx" :data='data'></slot>
    </div>
</template>

<script>
export default {
    data(){
        return{
            data: ['11', '22', '33', '44', '55', '66']
        }
    }
}
</script>