Vue基础语法（五）

原创

申小兮

发布于 2023-05-31 23:02:39

2661

发布于 2023-05-31 23:02:39

文章被收录于专栏：前端开发基础前端开发基础

一、插槽

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>

三、作用域插槽

1、使用前提

要在具名插槽的基础上使用

2、作用

传递数据，将子组件的数据传递给父组件

3、步骤

（1）先设置好具名插槽

（2）在子组件的<slot>标签上自定义属性名来绑定参数

（3）在父组件的具名插槽上赋值形参接收传参

格式：#插槽名="形参"

<body>
    <div id="app">
        <cpn>
            <template #slot1="item">
                <div>
                    <h3>我是一个具名插槽</h3>
                    <h5>{{item}}</h5>
                    <h5>{{item.cityname}}</h5>
                </div>
            </template>
        </cpn>
    </div>
    <template id="cpn">
        <div>
            <h1>{{msg}}</h1>
            <slot name="slot1" :cityName="city.name">
                <h4>默认内容</h4>
            </slot>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            components:{
                cpn:{
                    template:'#cpn',
                    data(){
                        return{
                            msg:'子组件',
                            city:{
                                name:'北京',
                            },
                        }
                    },
                },
            },
        })
    </script>
</body>

四、子组件向父组件通信总结

1、三步骤

（1）子组件准备好需要传递的参数

自定义方法：this.$emit('自定义方法名',参数1,参数2...)

自定义方法名格式：采用复合型name-name

（2）连接标签：通过子组件与父组件的连接关键<cpn></cpn>

（3）父组件接收和存储子组件传递来的参数

2、多参数传递例子

<body>
    <div id="app">
        <h4>{{idInfo}}</h4>
        <h4>{{nameInfo}}</h4>
        <h4>{{ageInfo}}</h4>
        <detail @info-transfer="getInfo"></detail>
    </div>
    <template id="detail">
        <div>
            <h1>{{msg}}</h1>
            <button @click="btnClick">传递学生信息</button>
        </div>
    </template>
    <script>
        new Vue({
            el:'#app',
            data:{
                idInfo:'未传递id',
                nameInfo:'未传递name',
                ageInfo:'未传递age',
            },
            methods:{
                getInfo(id,name,age){
                    console.log(id,name,age);
                    this.idInfo = id
                    this.nameInfo = name
                    this.ageInfo = age
                }
            },
            components:{
                detail:{
                    template:'#detail',
                    data(){
                        return{
                            msg:'测试',
                            info:{
                                id:'1',
                                name:'申小兮',
                                age:'18',
                            }
                        }
                    },
                    methods:{
                        btnClick(){
                            this.$emit('info-transfer',this.info.id,this.info.name,this.info.age)
                        }
                    }
                }
            }
        })
    </script>
</body>