《Vue3 六》插槽 Slot

插槽可以让组件的使用者来决定组件中的某一块区域到底存放什么元素和内容。

使用插槽:

插槽的使用过程其实就是抽取共性、预留不同。将共同的元素、内容依然留在组件内进行封装;将不同的元素使用 slot 作为占位,让外部决定到底显示什么样的元素。

复制代码
// App.vue
<template>
  <!-- 2. 在父组件中调用子组件时,子组件开始标签和结束标签之间的内容将会被插入到子组件中插槽中 -->
  <AppContent>
    <button>按钮</button>
  </AppContent>

  <AppContent>
    <a href="http:www.com">百度一下</a>
  </AppContent>
</template>

<script>
import AppContent from './components/AppContent'

export default {
  components: {
    AppContent,
  }
}
</script>

<style scoped>
</style>

// AppContent.vue
<template>
 <div>
  <h1>内容标题</h1>
  <!-- 在子组件中预留插槽 -->
  <slot></slot>
 </div>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>

插槽的默认内容:

<slot></slot>元素开始标签和结束标签之间的内容会作为插槽的默认内容,插槽的默认内容只会在没有提供插入的内容时显示。

复制代码
// App.vue
<template>
  <!-- 在父组件中调用子组件时,不提供插槽的内容 -->
  <AppContent />
</template>

<script>
import AppContent from './components/AppContent'

export default {
  components: {
    AppContent,
  }
}
</script>

<style scoped>
</style>

// AppContent.vue
<template>
 <div>
  <h1>内容标题</h1>
  <slot>
    <!-- <slot></slot> 开始标签和结束标签之间的内容会作为插槽的默认内容显示 -->
    <div>这是插槽的默认内容</div>
  </slot>
 </div>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>

具名插槽:

具名插槽:就是给插槽命名,通过 <slot> 元素的 name 属性可以给插槽命名。这样当一个组件中有多个插槽时,就可以区分出来要插入的内容是要插入哪个插槽中。

一个不带 name 的插槽,默认隐含的名字是 default。

复制代码
// App.vue
<template>
  <NavBar>
    <!-- 2. 在父组件中,使用 template 元素包裹要插入到插槽中的内容,通过 v-slot:插槽的名称 来决定要插入哪个插槽中 -->
    <!-- v-slot:[变量名] 可以通过这种方式来动态地绑定插槽的名称 -->
    <!-- v-slot 的缩写为 # -->
    <template v-slot:left>
      <button>返回</button>
    </template>
    <template v-slot:center>
      <input />
    </template>
    <template v-slot:right>
      <button>搜索</button>
    </template>
  </NavBar>
</template>

<script>
import NavBar from './components/NavBar'

export default {
  components: {
    NavBar,
  }
}
</script>

<style scoped>
</style>

// NavBar.vue
<template>
 <div class='navbar'>
    <div class="left">
        <!-- 1. 在子组件中通过 name 属性给插槽命名 -->
        <slot name="left"></slot>
    </div>   
    <div class="center">
        <slot name="center"></slot>
    </div> 
    <div class="right">
        <slot name="right"></slot>
    </div> 
 </div>
</template>

<script>
export default {
}
</script>

<style scoped>
</style

作用域插槽:

作用域插槽的核心就是能够将子组件中的数据传递给父组件的插槽来使用。

复制代码
// App.vue
<template>
  <AppContent>
    <!-- 2. 在父组件中,使用 template 元素包裹要插入到插槽中的内容,通过 v-slot:插槽名称="slotProps" 可以获取到子组件中指定插槽传递过来的数据 -->
    <template v-slot:default="slotProps">
      <p>{{ slotProps.content }}</p>
    </template>
  </AppContent>
</template>

<script>
import AppContent from './components/AppContent'

export default {
  components: {
    AppContent,
  }
}
</script>

<style scoped>
</style>

// AppContent.vue
<template>
 <div>
    <h1>子组件的标题</h1>
    <!-- 1. 在子组件中,通过给 slot 元素添加属性的方式给父组件传递数据 -->
    <slot content="子组件的内容"></slot>
 </div>
</template>

<script>
export default {
}
</script>

<style scoped>
</style>
相关推荐
Jinuss5 小时前
Vue3源码reactivity响应式篇之reactive响应式对象的track与trigger
前端·vue3
Jinuss13 小时前
Vue3源码reactivity响应式篇之EffectScope
前端·vue3
叫我阿柒啊3 天前
从Java全栈到前端框架的全面实战:一次真实面试的深度解析
java·spring boot·缓存·微服务·消息队列·vue3·rest api
叫我阿柒啊3 天前
从Java全栈到Vue3实战:一次真实面试中的技术探索
java·数据库·spring boot·微服务·typescript·vue3·restful
叫我阿柒啊3 天前
从Java全栈到前端框架:一位程序员的实战之路
java·spring boot·微服务·消息队列·vue3·前端开发·后端开发
叫我阿柒啊4 天前
从Java全栈到云原生:一场技术深度对话
java·spring boot·docker·微服务·typescript·消息队列·vue3
叫我阿柒啊4 天前
从Java全栈到Vue3实战:一次真实面试的深度复盘
java·spring boot·微服务·vue3·响应式编程·前后端分离·restful api
叫我阿柒啊4 天前
从Java全栈到前端框架:一次真实的面试对话
java·spring boot·微服务·前端框架·vue3·全栈开发
叫我阿柒啊4 天前
Java全栈开发工程师面试实战:从基础到微服务的完整技术演进
java·spring boot·微服务·前端框架·vue3·全栈开发·面试技巧
Lsx-codeShare5 天前
前端数据可视化:基于Vue3封装 ECharts 的最佳实践
前端·javascript·echarts·vue3·数据可视化