Vue——slot插槽

最新推荐文章于 2025-05-11 00:01:42 发布

原创最新推荐文章于 2025-05-11 00:01:42 发布 · 294 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

vue开发专栏收录该内容

43 篇文章

订阅专栏

本文深入探讨了Vue.js中的插槽(slot)概念，包括单个插槽、具名插槽和带数据的插槽的使用方法，展示了如何通过插槽实现组件间的灵活内容传递和展示。

Vue——slot插槽

slot简介

slot，是组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。插槽模板是slot，它是一个空壳子，因为它的显示与隐藏以及最后用什么样的html模板显示由父组件控制。但是插槽显示的位置却由子组件自身决定，slot写在组件template的什么位置，父组件传过来的模板将来就显示在什么位置。

单个插槽

单个插槽也叫做默认插槽，可以放置在组件的任意位置，一个组件中只能有一个该类插槽。

/ 父组件
<template>
    <div class="father">
        <h3>这里是父组件</h3>
        <child>
            <div class="tmpl">
              <span>菜单1</span>
              <span>菜单2</span>
              <span>菜单3</span>
              <span>菜单4</span>
              <span>菜单5</span>
              <span>菜单6</span>
            </div>
        </child>
    </div>
</template>

// child组件
<template>
    <div class="child">
        <h3>这里是子组件</h3>
        <slot></slot>
    </div>
</template>

在父组件中包裹在带有<slot>子组件之内的内容，最终都会被填充到<slot>中。所以slot相当于一个占位符一样的标签。

具名插槽

匿名插槽没有name属性，所以是匿名插槽。具名插槽，是给slot加上名字，从而进行名字匹配，将不同的内容放入不同的插槽进行填充，如果有无名的插槽，就放入默认插槽中。

//父组件
<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child>
      <div class="tmpl" slot="up">
        <span>菜单1</span>
        <span>菜单2</span>
      </div>
      <div class="tmpl" slot="down">
        <span>菜单-1</span>
        <span>菜单-2</span>
      </div>
      <div class="tmpl">
        <span>菜单->1</span>
        <span>菜单->2</span>
      </div>
    </child>
  </div>
</template>

// 子组件
<template>
  <div class="child">
    // 具名插槽
    <slot name="up"></slot>
    <h3>这里是子组件</h3>
    // 具名插槽
    <slot name="down"></slot>
    // 匿名插槽
    <slot></slot>
  </div>
</template>

带数据的插槽

我们可以通过slot-scope属性将申明给插槽的数据，传递给填充的页面。

// 父组件内容
<template>
  <div class="father">
    <h3>这里是父组件</h3>
    <child>
      <template slot-scope="user">
        <ul>
          <li v-for="item in user.data">{{item}}</li>
        </ul>
      </template>
    </child>
  </div>
</template>


// 子组件内容
<template>
  <div class="child">

    <h3>这里是子组件</h3>
    // 作用域插槽
    <slot  :data="data"></slot>
  </div>
</template>

export default {
    data: function(){
        return {
    	    data: ['zhangsan','lisi','wanwu','zhaoliu','tianqi','xiaoba']
        }
	}
}