匿名插槽

slot

组件中包裹的内容将会被插入到slot所在的位置

<script>
    Vue.component('MyBtn', {
        template: `
            <button>
                <slot></slot>
            </button>
        `
    })
    const App = {
        template: `
            <div>
                <MyBtn><a href='#'>登录</a></MyBtn>
            </div>
     `
    }
</script>

具名插槽

只要匹配到slot标签的name值，template中的内容就会被插入到这个槽中

<script>
    Vue.component('MyBtn', {
        template: `
            <button>
                <slot name='login'></slot> |
                <slot name='submit'></slot> |
                <slot name='register'></slot>
            </button>
        `
    })
    const App = {
        template: `
            <div>
                <MyBtn>
                    <template slot='register'>
                        <a href='#'>注册</a>
                    </template>
                </MyBtn>
                <MyBtn>
                    <template slot='login'>
                        <a href='#'>登录</a>
                    </template>
                </MyBtn>
                <MyBtn>
                    <template slot='register'>
                        <a href='#'>注册</a>
                    </template>
                </MyBtn>
            </div>
     `
    }
</script>

作用域插槽

让插槽内容能够访问子组件中才有的数据是很有用的

通过作用域插槽可以使相同的组件根据需求展现不同的内容

<script>
    Vue.component('MyList', {
        template: `
            <ul>
                <li v-for='item in list' :key="item.id">
                    <slot :listItem='item'></slot>
                    {{item.value}}
                </li>
            </ul>
        `,
        props: ['list']
    })
    const App = {
        template: `
            <div>
                <MyList :list="myList">
                    <template v-slot:default="data">
                        <input type="checkbox" v-model="data.listItem.checked"/>
                    </template>
                </MyList>
            </div>
     `,
        data() {
            return {
                myList: [{
                    id: 1,
                    value: 'first',
                    checked: false
                }, {
                    id: 2,
                    value: 'second',
                    checked: true
                }, {
                    id: 3,
                    value: 'third',
                    checked: true
                }, {
                    id: 4,
                    value: 'fourth',
                    checked: false
                }]
            }
        }
    }
</script>