VUE--插槽slot(将父级的模块片段插入到子级中)

发布时间:2024年01月19日

组件可以接收任意类型的JS值作为props,但我们想要为子组件传递一些模板片段,并在子组件中进行渲染时,此时可以采用插槽slot来实现

简单来说,插槽时组件内留一个或多个插槽的位置,供组件传递对应的模板代码(传递任意HTML的结构),插槽的存在使得组件变的更为灵活


?Slot与Props的比较

使用props的方式传递以下的模版片段:

<div>
  <h3>父级标题</h3>
  <p>父级内容</p>
</div>

Props的方式

// Parent.vue

<template>
    <h2>父组件</h2>
    <Child :title="父级标题" :content="父级内容"/>
</template>

<script>
    import Child from "./Child.vue";
    export default {
        data(){
            return{
            }
        },
        components:{
            Child
        }
    }
</script>

// Child.vue

<template>
    <h2>子组件</h2>
    <div>
        <h3>{{title}}</h3>
        <p>{{content}}</p>
    </div>
</template>

<script>
    export default {
        data(){
            return{

            }
        },
        props:["title","content"]

    }
</script>

使用插槽slot的方式

// Parent.vue

<template>
    <h2>父组件</h2>
    <Child>
        <div>
            <h3>父级标题</h3>
            <p>父级内容</p>
        </div>
    </Child>
</template>

<script>
    import Child from "./Child.vue";
    export default {
        data(){
            return{
            }
        },
        components:{
            Child
        }
    }
</script>
// Child.vue

<template>
    <h2>子组件</h2>
    <slot></slot>
</template>

<script>
    export default {
        data(){
            return{

            }
        }
    }
</script>

通过props和slot的比较,可看出当模块结果过于复杂时,插槽slot是更优选

插槽默认内容

当父级未提供任何内容给子级的情况下,子级可为插槽指定默认内容

// Parent.vue 中的 template块
<template>
    <h2>父级</h2>
    <Child />
</template>
// Child.vue 中 的template块
<template>
    <h2>子级</h2>
    <slot>默认内容</slot>
</template>

具名插槽

具名插槽:即带名字的插槽,当需要在组件内预留多个插槽的位置时,则需为插槽定义名字,指定插入的位置

注:

为具名插槽传入内容时:

对于父级组件,需要使用一个含 v-slot 指令的 <template>元素,并将目标插槽的名字传给该指令;(其中,v-slot可将其简写为#? ?(v-bind可简写为:) )

对于子级组件,<slot>元素需要一个特殊的属性? name ,用于为各个插槽分配唯一的ID,以确定每一处要渲染的内容

// Parent.vue

<template>
    <Child>
        <template v-slot:header>
            <p>Header</p>
        </template>
        <template #main>
            <p>Main</p>
        </template>
    </Child>
</template>

v-slot:header 与 #header 是等价的?

//Child.vue

<template>
    <slot name="header"></slot>
    <slot name="main"></slot>
</template>

?

具名插槽传数据(子父组件数据交互的实现)

通过插槽的方式,将子组件中的内容进行显示

// Parent.vue
<template>
    <Child>
        <template v-slot:header="slotProps">
            <p>{{ currentMsg }}--{{ slotProps.content }}</p>
        </template>
        <template #main="slotProps">
            <p>{{ slotProps.content1}}</p>
        </template>
    </Child>
</template>


<script>
    import Child from "./Child.vue";
    export default {
        data(){
            return{
                currentMsg:"父级组件的内容"
            }
        },
        components:{
            Child
        }
    }
</script>
// Child.vue
<template>
    <slot name="header" :content="contentMsg"></slot>
    <slot name="main" :content1="contentMsg1"></slot>
</template>


<script>
    export default {
        data(){
            return{
                contentMsg:"子级组件的内容",
                contentMsg1:"子级组件的内容1",

            }
        }
    }
</script>

文章来源:https://blog.csdn.net/qq_62799602/article/details/135673855
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。