Vue——slot的含义是什么, slot之详细解释

本文深入探讨了Vue.js中的Slot机制,展示了如何通过Slot在父组件和子组件之间传递内容。无名Slot用于默认内容插入,而具名Slot则允许更精确的内容定位。示例代码详细解释了如何在子组件模板中定义Slot,以及父组件如何利用这些Slot插入自定义内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

slot 英文的意思是“插槽”的意思,vue用这个词做标签,意思是能够在这个标签里插入一些东西,是由调用组件(父组件)向其调用的子组件里插入一些东西的一个解决办法。

slot的语法如下:

<slot></slot>

以上这段代码是书写在需要支持插入能力的子组件里的,有了这段标签代码后,子组件就支持父组件向其内部插入东西了。

一个支持slot的子组件的模板html如下:

<template>
  <div class="slot-child">
      <div><slot>在这个地方可以调用者可以插入东西</slot></div>
      <span>子组件里的其它内容</span>
      <span>{{ message }}</span>
  </div>
</template>

<script>
export default {
  name: 'subcomponent',
  data () {
    return {
      message: "我自己的消息"
    }
  }
}
</script>

调用subcomponent组件的符组件如果需要在子组件里面插入一些东西,父组件必须在调用子组件的地方输入标签,即在子组件的名称标签里写标签或文本内容。

一个父组件的样本代码如下:

<template>
  <div class="slots">
      <div>父组件自己的内容</div>
      <!-- subcomponent 标签之间的内容将插入到子组件的slot标签里  -->
      <subcomponent>
          <div class="no-name">这个文字将会插入到子组件里</div>
      </subcomponent>
  </div>
</template>

<script>
import subcomponent from 'component/Subcomponent'
export default {
    name: 'caller',
    components:{
        subcomponent
    },
    data () {
        return {
      
        }
    }
}
</script>

可以在子组件里书写多个slot标签,如果这些slot标签不添加name属性,则就是说这些slot不具有名称,这些slot插槽将插入父组件调用子组件时书写在子组件标签中没有 slot的标签的内容。 

一个具名子组件的样本如下:

<div class="sub-item">
    <slot>
        <p>如果父组件没用插入内容,我将作为默认出现</p>
    </slot>
    <div>
    <slot name="xxx">
         <p>如果父组件没用插入内容,我将作为默认出现xxx</p>
    </slot>
    </div>
</div>

 父组件的调用具名slot的子组件的代码如下:

<div class="my">我自己的东西</div>
    <child-component>
    <p>插入到子组件里的内容,不具名</p>
			
    <p slot="xxx">插入到子组件XXX slot里的内容</p>
    <p>插入到子组件里的内容,不具名0000</p>
    <p>插入到子组件里的内容,不具名2222</p>
</child-component>

一个包含具名slot的单文件slot的测试样本如下

这是一个独立的完整文件,可以直接复制->粘贴->另存为文件到web目录下做测试:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue之slot示例</title>
</head>
<body>
    <div id="app">
		<div class="my">调用组件自己的东西</div>
		<!-- 子组件child-component标签内 没有任何内容 -->
		<child-component></child-component>
		
        <!-- 子组件child-component标签内 有内容,将插入到子组件的slot处 -->
        <child-component>
            <p>插入到子组件里的内容,不具名</p>
			<!-- 将插入到子组件的具名xxx的slot处 -->
			<p slot="xxx">插入到子组件具名xxx的slot里的内容</p>
			<p>插入到子组件里的内容0000,不具名</p>
			<p>插入到子组件里的内容2222,不具名</p>
        </child-component>
		
		<child-component2>
            <p>插入到子组件里的内容2</p>
			
			<p slot="xxx">插入到子组件XXX slot里的内容2</p>
        </child-component2>
    </div>
    
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    <script>

        Vue.component('ChildComponent', {
            template: '\
            <div class="sub-item">\
                <slot>\
                    <p>父组件调用我时标签内没用插入任何内容</p>\
                </slot>\
				<div><slot name="xxx">\
                    <p>父组件调用我时没有 slot="xxx" 的标签或者标签内没用插入任何内容</p>\
                </slot></div>\
            </div>'
        });

		Vue.component('ChildComponent2', {
            template: '\
            <div class="sub-item">\
                <slot>\
                    <p>父组件调用我时标签内没用插入任何内容</p>\
                </slot>\
				<slot name="xxx">\
                    <p>父组件调用我时没有 slot="xxx" 的标签或者标签内没用插入任何内容</p>\
                </slot>\
            </div>'
        });
		
        var app = new Vue({
            el: '#app'
        })

    </script>
	<style>
	.sub-item {
		border: 1px solid #ccc;
		padding: 20px 30px;
		margin: 20px;
	}
	
	.my {
		border: 1px solid #ddd;
		padding: 10px 30px;
		margin: 10px 20px;
	}
	</style>
</body>
</html>

如果没有指定默认的匿名slot, 父组件调用子组件时子组件名称标签标签内的内容片段都将被丢弃。

### Vue3 中 Slot 的事件处理 在 Vue 3 中,通过插槽 (slot) 实现父子组件之间的交互不仅限于传递静态内容或数据绑定。为了增强这种交互能力,可以利用作用域插槽来传递事件处理器。 #### 使用作用域插槽传递事件处理器 当希望父组件能够响应来自子组件内部触发的动作时,可以在定义具名插槽的同时向其提供额外的数据——即事件发射器函数。这样做的好处在于可以让父级更灵活地控制行为逻辑而不必深入理解子组件的具体实现细节[^1]。 下面是一个简单的例子展示如何使用作用域插槽来进行事件处理: ```vue <!-- ChildComponent.vue --> <template> <div class="child-component"> <!-- 定义一个具有名称 'action' 的插槽并暴露 clickHandler 方法给父组件 --> <slot name="action" :handleClick="clickHandler"></slot> </div> </template> <script setup> import { defineEmits } from "vue"; const emit = defineEmits(['customEvent']); function clickHandler() { console.log('Child component button clicked'); // 向外发送自定义事件 emit('customEvent', 'some data'); } </script> ``` ```vue <!-- ParentComponent.vue --> <template> <ChildComponent v-slot:action="{ handleClick }"> <button @click="handleClick">点击这里!</button> </ChildComponent> </template> <script setup> // 当接收到 child 组件发出的 customEvent 时执行相应操作 defineExpose({ onCustomEvent(data){ alert(`Received event with message: ${data}`); } }); </script> ``` 在这个例子中,`ParentComponent` 可以监听 `ChildComponent` 发射出来的 `customEvent` 并作出反应;而具体的按钮点击动作则由 `ChildComponent` 负责管理并通过 `emit()` 函数通知外部世界发生了什么变化[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值