Vue中插槽的使用

米柴

已于 2022-08-21 23:05:13 修改

阅读量341

点赞数

分类专栏： vue 文章标签： vue.js javascript ecmascript

于 2022-07-31 16:24:14 首次发布

本文链接：https://blog.csdn.net/weixin_48917089/article/details/126087004

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

插槽就是在当前组件的模板里面留了一个接口，模块可能含有许多的元素标签，但是有时候需要流出一个空白，让自己按需求注入内容。

<slot></slot> 表示一个插槽，没有和特定组件绑定，可以传入内容

插槽使用1：未指定特定的组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插槽的使用1</title>
</head>
<body>
    <div id="app">
       <mya>hello slot</mya>
    </div>
    <template id="A">
        <div>
            <slot></slot>  
        </div>
    </template>
    <script src="../js/vue.js"></script>
    <script>
        let mya={
            template:'#A'
        }
        var vm=new Vue({
            components:{
                mya
            }
        });
    </script>
</body>
</html>

在这里插入图片描述
插槽使用2：指定特定的组件，进行相互绑定

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue中this.$xx的使用</title>
</head>

<body>
    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>插槽的使用1</title>
    </head>

    <body>
        <div id="app">
            <mya id="test" ref="hhh">
                <myb slot="good"></myb>
                <!--到指定的插槽位置中显示-->
            </mya>
        </div>
        <template id="A">
            <div>
                <p>A的领土</p>
                <slot name="good"></slot>
            </div>
        </template>
        <template id="B">
            <div>
                <p>行云流水般的诗意</p>
            </div>
        </template>
        <script src="js/vue.js"></script>
        <script>
            //插槽的演示
            let mya = {
                template: '#A'
            }
            let myb = {
                template: '#B'
            }
            var vm = new Vue({
                el: '#app',
                //自定义属性
                myData: {
                    username: 'jakc'
                },
                components: {
                    mya,
                    myb
                },
            });
           

        </script>
    </body>

    </html>
</body>

</html>

在这里插入图片描述
作用域插槽：

定义一个Input组件，通过slot定义一个插槽，绑定属性，将这个值传递给使用此插槽的标签。

<template lang="cn">
<!-- 模拟作用域插槽的使用 -->
    <div>
        <input type="text" v-model="inputParam"/>
        <slot :val="inputParam"></slot>
    </div>
</template>
<script>
export default {
    data(){
        return{
            inputParam:''
        }
    }
}
</script>
<style>
    
</style>

使用插槽: v-slot:default绑定默认插槽，scope表示使用对象的形式接受插槽传递的数据

<template lang="">
    <div>
       请输入内容： 
       <input-t>
       <template v-slot:default="scope">
       <!--获取传递的数据 -->
           <p> {{scope.val}}</p>
       </template>
       </input-t>
    </div>
</template>
<script>
import InputT from "./InputT.vue";
export default {
    //导入组件
    components:{
        InputT
    }
}
</script>
<style lang="">
    
</style>