vue.js插槽Slot的用法与具名插槽、作用域插槽的使用

Myth丶恋晨 2022-05-14 11:58 355阅读 0赞

**1、基本用法**  
插槽指允许将自定义的组件像普通标签一样插入内容

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>
        `
    })