0
点赞
收藏
分享

微信扫一扫

Vue基础语法

ZMXQQ233 2023-08-20 阅读 75

一、插槽

1、格式

放在子组件

<slot>内容</slot>

2、内容

可以放任何模块的代码

3、原理

父组件引用时,填写内容会被应用到插槽

css模块

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: aqua;
        float: left;
        margin-right: 20px;
    }
</style>

html模块

<body>
    <div id="app">
        <cpn>
            <a href="">点击</a>
        </cpn>
        <cpn>
            <button>点击</button>
        </cpn>
        <cpn></cpn>
    </div>
    <template id="cpn">
        <div>
            <div class="box">
                <h1>{{msg}}</h1>
                <slot>
                    <h4>默认内容</h4>
                </slot>
            </div>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            components:{
                cpn:{
                    template:'#cpn',
                    data(){
                        return{
                            msg:'子组件'
                        }
                    }
                }
            }
        })
    </script>
</body>

二、具名插槽

1、定义

使用多个插槽时,给slot添加name属性,设置slot名称

2、步骤

(1)<slot>标签添加绑定name属性

(2)便签显示处用<template>标签包裹,并绑定对应的slot,绑定方法如:

①v-slot:插槽名【注意中间是英文冒号,不是等号】

②缩写:#插槽名

<body>
    <div id="app">
        <cpn>
            <template v-slot:slot1>
                <div>
                    <a href="">跳转</a>
                </div>
            </template>
            <template #slot2>
                <div>
                    <a href="">点击</a>
                </div>
            </template>
        </cpn>
        <cpn>
            <template #slot1>
                <div>
                    <button>点击</button>
                </div>
            </template>
            
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <div class="box">
                <slot name="slot1"></slot>
                <h1>{{msg}}</h1>
                <slot name="slot2"></slot>
            </div>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            components:{
                cpn:{
                    template:'#cpn',
                    data(){
                        return{
                            msg:'子组件'
                        }
                    }
                }
            }
        })
    </script>
</body>

Vue基础语法_插槽

举报

相关推荐

0 条评论