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

最新推荐文章于 2024-06-05 09:46:52 发布

大飞飞鱼

最新推荐文章于 2024-06-05 09:46:52 发布

阅读量3.8k

点赞数 3

本文链接：https://blog.csdn.net/ababab12345/article/details/119848583

版权

HTML5技术同时被 2 个专栏收录

42 篇文章

订阅专栏

Vue

4 篇文章

订阅专栏

本文深入探讨了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, 父组件调用子组件时子组件名称标签标签内的内容片段都将被丢弃。