vue 中插槽共有几种，及插槽的作用

Vue中的插槽用法详解

最新推荐文章于 2025-09-25 08:26:04 发布

原创最新推荐文章于 2025-09-25 08:26:04 发布 · 638 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

前端同时被 3 个专栏收录

119 篇文章

订阅专栏

html5

91 篇文章

订阅专栏

前端面试真题

84 篇文章

订阅专栏

文章详细介绍了Vue.js中三种插槽的使用：默认插槽用于替换组件内容，具名插槽允许在不同位置插入内容，作用域插槽则让子组件提供数据给父组件来定制渲染。通过示例展示了如何在模板中定义和使用这些插槽。

三种：默认插槽、具名插槽、作用域插槽

默认插槽
默认插槽就是指，的作用类似于占符。

//定义一个全局子组件
Vue.component('child', {
  template: '<div><slot></slot></div>',
});

var vm = new Vue({
  el: '#root',
});

<!--引用child组件-->
<div id="root">
  <child>
    <span>我是占位符</span>
  </child>
</div>

上述的子组件 child 里定义的 slot 被 span 标签给代替了，如果子组件里没有定义 slot，则 span 标签会被直接忽略，且一个子组件里只能定义一个单个插槽。
具名插槽
可以通过设置 name 属性，指定显示的位置
定义一个组件：

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

<base-layout>
  <template v-slot:header>
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

作用域插槽
父组件替换插槽标签，但是内容由子组件来提供

<body>
  <div id="root">
    <child>
      <!--定义一个插槽，该插槽必须放在template标签内-->
      <template slot-scope="props">
        <li>{{props.value}}</li>
      </template>
    </child>
    <!--!--定义不同的渲染方式-->
    <child>
      <!--slot-scope="props"作用是使props指向子组件中定义的<slot>-->
      <template slot-scope="props">
        <h1>{{props.value}}</h1>
      </template>
    </child>
  </div>
</body>
<script>
  //定义一个全局子组件
  Vue.component('child', {
    data: function () {
      return {
        list: [1, 2, 3, 4],
      };
    },
    template:
      '<div><ul><slot v-for="value in list" :value=value></slot></ul></div>',
  });

  var vm = new Vue({
    el: '#root',
  });
</script>