Vue学习笔记 - 组件化开发 - 插槽

组件插槽基本用法

传递的是模板

示例：

html:

<div id='app'>
    <alert-box>警告1</alert-box>
    <alert-box>警告2</alert-box>
    <alert-box></alert-box>
</div>

js:

Vue.component('alert-box', {
    template: `
    <div>
        <strong>Error:</strong>
        <slot>默认值</slot>
    </div>
    `,
})

注意：默认值会被替换，而不是一起展示。

具名插槽

根据 slot 名称 name 进行匹配，没有匹配到的放到没名字的默认插槽。

示例：

<div id='app'>
    <base-layout>
        <p slot='header'>标题信息</p>
        <p>默认1</p>
        <p>默认2</p>
        <p slot='footer'>底部信息</p>
    </base-layout>

    <base-layout>
    <!-- 多条文本填充到插槽中用template -->
    <!-- template只是临时包裹内容，不会渲染到页面 -->
        <template slot='header'>
            <p>标题信息1</p>
            <p>标题信息2</p>
        </template>
        <template>
            <p>默认1</p>
            <p>默认2</p>
        </template>
        <template slot='footer'>
            <p>底部信息1</p>
            <p>底部信息1</p>
        </template>
    </base-layout>
</div>

js:

Vue.component('base-layout', {
    template: `
    <div>
        <header>
            <slot name='header'></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name='footer'></slot>
        </footer>
    </div>
    `,
})

作用域插槽

应用场景：父组件对子组件的内容进行加功处理

示例：

控制子组件内容样式

html:

<div id='app'>
    <fruit-list :list='list'>
        <template slot-scope='slotProps'>
            <strong v-if='slotProps.finfo.id === 1' class='current'>
                {{slotProps.finfo.name}}
            </strong>
            <span v-else>{{slotProps.finfo.name}}</span>
        </template>
    </fruit-list>
</div>

js:

Vue.component('fruit-list', {
    props: ['list'],
    template: `
    <div>
        <li :key='item.id' v-for='item in list'>
            <slot :finfo='item'>{{item.name}}</slot>  
        </li>
    </div>
    `,
})

var vm = new Vue({
    el: '#app',
    data: {
        list: [
            {
                id: 0,
                name: 'apple'
            },
            {
                id: 1,
                name: 'banana'
            },
            {
                id: 2,
                name: 'chanche'
            },
        ]
    }
})