vue slot插槽的使用

最新推荐文章于 2024-07-26 13:02:41 发布

原创最新推荐文章于 2024-07-26 13:02:41 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端

本文介绍了Vue.js中的插槽（slot）机制，包括默认插槽和具名插槽的使用。默认插槽用于替换子组件内部预设内容，而具名插槽则允许更精确地插入内容到子组件特定位置。通过示例展示了如何在父组件中重写子组件的slot内容，以实现更加灵活的组件复用和定制。

其实插槽可以理解为是一个占位符。就比如说家里要洗衣服就要放洗衣粉，这是很固定的。但是你有时候并不想用洗衣粉，这个时候自己就可以更换洗衣液就类似这个意思。

1、slot（默认插槽）

我们现在子组件里面写一段话，并且使用slot给他一段默认的话

<template>
  <div>
    <!-- 这里是子组件 -->
    <div>
      <h1>今天的天气状况如何？？？</h1>
      <slot>天气状况为：阴天</slot>
    </div>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>

</style>

然后咱们可以在父组件里调用它，并更改掉slot里面的内容

<template>
  <div>
    <!-- 这里是父组件 -->
    <B>
      <slot>
        天气情况为：晴天
      </slot>
    </B>
  </div>
</template>

<script>
import B from '../views/B.vue'
  export default {
  components: { B },
    
  }
</script>

<style lang="scss" scoped>

</style>

2、slot（具名插槽）

具名插槽的使用场景更多，比如下面这个。

还是先在子组件里放置内容 使用slot时给他name属性

<template>
  <div>
    <!-- 这里是子组件 -->
    <div>
      <h1>
        <slot name="title">
          今天天气状况如何???
        </slot>
      </h1>
      <!-- 插槽里面的内容可给可不给 -->
      <slot name="content">天气状况为：阴天</slot>
    </div>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>

</style>

父组件要更改子组件插槽内容必须要跟子组件中的name对应

<template>
  <div>
    <!-- 这里是父组件 -->
    <B>
      <template v-slot:title>
        今天下午去吃啥???
      </template>
      <template v-slot:content>
        大盘鸡
      </template>
    </B>
  </div>
</template>

<script>
import B from '../views/B.vue'
  export default {
  components: { B },
    
  }
</script>

<style lang="scss" scoped>

</style>