slot 基本用法

最新推荐文章于 2024-12-10 23:05:50 发布

原创最新推荐文章于 2024-12-10 23:05:50 发布 · 2.3k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了Vue.js中slot的基本用法，包括无名插槽、具名插槽和作用域插槽。无名插槽允许用户自定义组件内容，具名插槽通过命名使插入内容更具选择性，而作用域插槽则可以将定义插槽时的变量传递到使用插槽的上下文中。

1 、slot 基本用法

插槽指允许将自定义的组件像普通标签一样插入内容

import Vue from 'vue'
// 定义组件componentOne 
const compoentOne = {
    template: `
        <div :style="style1">
            <slot></slot> // 定义插槽
        </div>
    `,
    data () {
        return {
            style1: {
                width: '200px',
                height: '200px'
                border: '1px solid #ccc'
            }
        }
    }   
}

// 调用组件
new Vue({
    components: {
        ComOne: componentOne 
    },
    el: '#id',
    data () {
        return {
            val1: '123'
        }
    },
    template: `
        <div>
            <com-one>
                <span>{{val1}}</span> // 使用插槽
            </com-one>
        </div>
    `
})

2、具名插槽

给具体的插槽命名，并在使用的时候传入插槽的名称

import Vue from 'vue'

// 定义组件componentOne 
const compoentOne = {
    template: `
        <div :style="style1">
            <div>
                <slot name="header"></slot> // 定义一个名称为header的插槽
            </div>
            <div>
                <slot name="body"></slot> // 定义一个名称为body的插槽
            </div>
        </div>
    `,
    data () {
        return {
            style1: {
                width: '200px',
                height: '200px'
                border: '1px solid #ccc'
            }
        }
    }   
}

// 调用组件
new Vue({
    components: {
        ComOne: componentOne 
    },
    el: '#id',
    data () {
        return {
            val1: '123',
            val2: '456'
        }
    },
    template: `
        <div>
            <com-one>
                <span slot="header">{{val1}}</span> // 使用插槽'header**重点内容**'
                <span slot="body">{{val2}}</span> // 使用插槽'body'
            </com-one>
        </div>
    `
})

3 、作用域插槽

将定义插槽的变量作用域到使用插槽中

import Vue from 'vue'

// 定义组件componentOne 
const compoentOne = {
    template: `
        <div :style="style1">
            <slot :aa="val1" :bb="val2"></slot> // 给插槽传入变量
        </div>
    `,
    data () {
        return {
            style1: {
                width: '200px',
                height: '200px'
                border: '1px solid #ccc'
            },
            val1: 'slot1',
            val2: 'slot2'
        }
    }   
}

// 调用组件
new Vue({
    components: {
        ComOne: componentOne 
    },
    el: '#id',
    data () {
        return {
            val1: '123'
        }
    },
    template: `
        <div>
            <com-one>
                <span slot-scope="props">{{props.aa}}{{props.bb}}{{val1}}</span> // 定义插槽传入的对象props,并使用
            </com-one>
        </div>
    `
})