Vue中的slot插槽

最新推荐文章于 2024-09-09 09:21:31 发布

原创最新推荐文章于 2024-09-09 09:21:31 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文详细介绍了Vue.js中插槽(slot)的使用方法，包括匿名插槽、具名插槽及2.6+版本支持的v-slot方式。通过实例演示如何在父组件与子组件间传递内容，并展示了如何使用具名槽口接受props。

slot插槽

vue里提供了一种将父组件的内容和子组件的模板整合的方法：内容分发，通过slot插槽来实现

匿名插槽

在父组件中使用子组件的时候，在子组件标签内部写入内容。在子组件的模板中可以通过来使用

<div id="app">
    <hello>
        <div>联通卡</div>
        <div>移动卡</div>
    </hello>
</div>

<template id="hello">
    <div>
    	<slot></slot>
    </div>
</template>

具名插槽

父组件在子组件标签内写的多个内容我们可以给其设置slot属性来命名，在子组件的模板通过通过使用带有name属性的slot标签来放置对应的slot。

<div id="app">
    <hello>
        <div slot="a">联通卡</div>
        <div slot="b">移动卡</div>
    </hello>
</div>

<template id="hello">
    <div>
        <slot name="a"></slot>
        <slot name="b"></slot>
    </div>
</template>

新版本2.6+支持v-slot方式

v-slot在使用时，需要在template标签内，这点大家要注意

<hello>
    <template v-slot:a>
        <div>联通卡</div>
    </template>
    <template v-slot:b>
        <div>移动卡</div>
    </template>
</hello>


<template id="hello">
    <div>
        <slot name="a" ></slot>
        <slot name="b" ></slot>
    </div>
</template>

接受props的具名槽口

<div id="app">
    <hello>
        <template v-slot:a>
        	<div>联通卡</div>
        </template>
        <template v-slot:b="info">
        	<div>移动卡 {{info.msgb}}</div>
        </template>
    </hello>
</div>

<template id="hello">
    <div>
        <slot name="a" ></slot>
        <slot name="b" :msgb="msg"></slot>
    </div>
</template>


 Vue.component("hello",{
     template:"#hello",
     data(){
         return {
         	msg:"你好"
         }
     }
 })