vue插槽、具名插槽、作用域插槽

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

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

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

17 篇文章

订阅专栏

本文深入讲解Vue中的插槽使用，包括普通插槽、具名插槽及作用域插槽的概念与实践，帮助开发者掌握组件间内容传递的技巧。

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

vue插槽的使用

my-component组件

<template>
  <div>
    hello
  </div>
</template>
<script>
export default {
  name: 'MyComponent'
}
</script>

父组件使用my-component组件

<template>
  <div>
    <my-component>
      world
    </my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent'
export default {
  name: 'Test',
  components: { MyComponent },
  data() {
    return {
    }
  }
}
</script>

如上，使用my-component组件时，在父组件中直接添加内容，输出结果如下：
在这里插入图片描述

若想在子组件中插入内容，这时候就需要用到插槽，我们做如下改变

普通插槽

my-component

<template>
  <div>
    hello
    <slot>这里可以添加没有使用插槽时默认显示的内容</slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

此时页面显示：
在这里插入图片描述

由此可见，插槽得作用就是为了在使用组件时添加额外得内容。上面用的时默认普通插槽。

具名插槽

具名插槽顾名思义就是具体名称的插槽，当组件中添加多个插槽的时候就要对插槽进行区分，这时候就要给插槽起名字，

my-component

<template>
  <div>
    hello
    <slot name="dream"></slot>
  </div>
</template>

<script>
export default {
  name: 'MyComponent'
}
</script>

父组件

<template>
  <div>
    <my-component>
      <p slot="world">world</p>
      <p slot="dream"> dream</p>
    </my-component>
  </div>
</template>

<script>
import MyComponent from './MyComponent'
export default {
  name: 'Test',
  components: { MyComponent },
  data() {
    return {
    }
  }
}
</script>