技术查缺补漏day03(vue3-具名插槽 el-table联合使用)

_Kayo_

已于 2022-09-28 00:21:11 修改

阅读量424

点赞数

分类专栏：搬砖文章标签： vue.js 前端 javascript

于 2022-09-25 11:41:08 首次发布

本文链接：https://blog.csdn.net/mashirokayo/article/details/127035709

版权

搬砖专栏收录该内容

5 篇文章 0 订阅

订阅专栏

orz太久没更新了，应该会逐渐一口气补到day20左右

vue具名插槽（感悟到比起看别人的博客学习，还是更应该看官方文档，会学得更好些）

插槽 Slots | Vue.js

具名插槽写法

在一个 <BaseLayout> 组件中，有如下模板：

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

在父组件中给对应的插槽传递内容

<BaseLayout>
  <template v-slot:header>
    <!-- header 插槽的内容放这里 -->
  </template>
</BaseLayout>

v-slot可以简写成#

#default会填入默认插槽中，即<slot></slot>中

<BaseLayout>
  <template #header>
    <h1>Here might be a page title</h1>
  </template>

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

  <template #footer>
    <p>Here's some contact info</p>
  </template>
</BaseLayout>

插槽间传值-默认插槽传值