Vue~插槽

什么是插槽

插槽:英文单词 slot

抽取公共组件时,组件内部总会出现一些差异性内容;Vue中提供了一种空间占位语法,称为插槽

1,匿名插槽

项目视图中,子组件中占有一个差异位置,可以通过匿名插槽实现占位

列表页面中,需要展示不同类型数据的新闻数据、通知数据、公告数据

① 定义插槽:src/components/DataList.vue

<template>
  <div class="s-container">
    <h3>功能组件</h3>
    <div>
      <!-- 插槽:匿名插槽 -->
      <slot></slot>
    </div>
    <div>
      公共底部内容
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
.s-container{
  width: 400px;
  padding: 10px;
  border-radius: 5px;
  box-shadow: #333 0 0 2px;
}
</style>

② 给插槽中注入数据,编辑src/pages/List.vue

<template>
  <div class="list-container">
    <h2>列表页面</h2>
    <!-- 1、没有插入内容的子组件-->
    <DataList/>
    <!-- 2、新闻数据-->
    <DataList>
      <!-- 给匿名插槽添加内容 -->
      <ul>
        <li v-for="news in newsList" :key="news.id">{{ news.content}} </li>
      </ul>
    </DataList>
    <!-- 3、通知内容 -->
    <DataList>
      <ol>
        <li v-for="notice in noticeList" :key="notice.id">{{notice.content}}</li>
      </ol>
    </DataList>
    <!-- 4、通知内容-->
    <DataList>
      <div v-for="advice in adviceList" :key="advice.id">{{advice.body}}</div>
    </DataList>
  </div>
</template>

<script>
import DataList from '../components/DataList.vue'

export default {
  data() {
    return {
      newsList: [
        {id: 2, content: "苹果系统升级"},
        {id: 1, content: "全球互联网大会"}
      ],
      noticeList: [
        {id: 1, content: "周末一起去玩!"}
      ],
      adviceList: [
        {id: 3, body: "周一上班"},
        {id: 2, body: "周二也要上班"},
        {id: 1, body: "周三还要上班!!!"}
      ]
    }
  },
  components: {
    DataList
  }
}
</script>

<style>

</style>

2,具名插槽

项目中定义弹出窗口,多个页面中都出现了弹窗,需要将弹窗抽取成一个功能组件;功能组件中不同的位置展示的内容不同,表示差异内容的位置不止一个!

① 定义包含具名插槽的公共组件:src/components/Dialog.vue

<template>
  <div class="d-container">
    <!-- 弹窗标题-->
    <h3><slot name="title"></slot></h3>
    <!-- 弹窗内容-->
    <p><slot></slot></p>
    <!-- 弹窗操作-->
    <div><slot name="opera"></slot></div>
  </div>
</template>

<script>
export default {

}
</script>

<style>
.d-container{
  width: 300px;
  height: 100px;
  box-shadow: #000 0 0 2px;
}
</style>

② 编辑src/pages/List.vue,添加具名插槽内容

<template>
  <div class="list-container">
    <!-- 具名插槽-->
    <Dialog>
      <template v-slot:title>
        警告信息对话框
      </template>
      <template v-slot:opera>
        <button>确认</button>
      </template>
      <p>
        警告信息的提示内容
      </p>
    </Dialog>
    <Dialog>
      <template #title>
        确认信息
      </template>
      <template #opera>
        <button>编辑</button>
        <button>确认</button>
      </template>
      <p>
        确认信息的提示内容
      </p>
    </Dialog>
    <Dialog>
      <template slot-scope:title>
        危险操作提示
      </template>
      <template slot-scope:opera>
        <button>确认操作</button>
      </template>
      <p>
        微信操作信息的提示内容
      </p>
    </Dialog>

  </div>
</template>

<script>
import DataList from '../components/DataList.vue'
import Dialog from '../components/Dialog.vue'

export default {
  data() {
    return {...},
  components: {
    DataList,
    Dialog
  }
}
</script>

<style>

</style>

3,作用域插槽

插槽中可以实现父组件给子组件注入数据完成数据的渲染;一旦输入的数据包含和用户之间的交互操作,需要子组件通过插槽给父组件传递数据

① 编写作用域插槽:src/components/ScopeList.vue

<template>
  <div class="sc-container">
    <ul>
      <li v-for="news in newsList" :key="news.id">
        <p>
          <span>{{ news.id }}</span>
          <span>{{ news.content }}</span>
          <span>
            <!-- 需要插槽给父组件传递正在操作的数据 -->
            <!-- 通过插槽的属性进行传递:作用域插槽-->
            <slot :row="news"></slot>
          </span>
        </p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: ['newsList']
}
</script>

<style scoped>
.sc-container{
  padding:20px;
  box-shadow: #000 0 0 2px;
  width: 400px;
}
</style>

② 编辑src/pages/List.vue,添加接受作用域数据的插槽组件

<!-- 作用域插槽-->
<ScopeList :newsList="newsList">
    <template v-slot="props">
<button @click="checkDetail(props)">查看详情</button>
    </template>
</ScopeList>
<ScopeList :newsList="newsList">
    <template v-slot="attr">
<!-- <template slot-scope="attr"> -->
<button @click="edit(attr)">编辑</button>
<button @click="del(attr)">删除</button>
    </template>
</ScopeList>

插槽slot主要区分三种

  • 匿名插槽:
    • <slot></slot>
    • 功能组件中,添加唯一一个占位位置,由父组件指定这个位置的内容
  • 具名插槽:
    • <slot name="mySlot"></slot>
    • 功能组件中,需要在多个位置添加不同的内容,通过具名插槽实现,父组件中指定插槽的名称填充数据
  • 作用域插槽:
    • <slot :row="数据"></slot>
    • 功能组件中,需要将插槽中的数据传递给父组件使用;通过插槽的自定义属性进行数据传输
<think>嗯,用户想了解Vue2中插槽的使用方法,我需要先回忆一下Vue2的插槽相关知识。首先,Vue插槽分为默认插槽、具名插槽和作用域插槽。默认插槽是最基础的,允许父组件向子组件传递内容。具名插槽则可以定义多个插槽,通过名字来区分。作用域插槽能让子组件的数据在父组件的插槽内容中使用。 然后,我需要确保回答的结构清晰,按照用户的要求分步骤说明。可能需要先介绍基本用法,再逐步深入不同类型的插槽。同时,用户提到了示例,所以每个部分都应该有代码示例,而且要符合Vue2的语法,比如使用slot属性而不是v-slot指令,因为Vue2默认使用slot和slot-scope。 还要注意引用用户提供的站内引用,比如引用[1]中的例子,说明如何在子组件中定义插槽,父组件如何传递内容。引用[2]提到了使用插槽Vue-LayUI中的实际应用,比如侧边栏和导航组件,可能需要结合这些例子来展示插槽的实际应用场景。 另外,用户可能在使用过程中遇到问题,比如作用域插槽的数据传递,或者具名插槽的命名冲突,需要给出常见问题的解决方法。例如,作用域插槽Vue2中使用slot-scope属性,而在Vue3中则是v-slot,这点需要明确区分,避免用户混淆。 还有,用户提供的引用[3]提到vue-router的安装问题,虽然和插槽无关,但需要注意在示例代码中不要出现Vue3的语法,比如使用<template v-slot>,而是应该用旧的语法,比如slot="header"和slot-scope。 最后,生成相关问题时要围绕插槽的深入使用、与其他技术的结合以及常见问题,确保问题对用户有帮助,引导他们进一步学习。</think>### Vue2 插槽使用指南(分步说明) #### 一、基础插槽 1. **默认插槽**(父组件内容注入子组件指定位置) ```html <!-- 子组件 ChildComponent.vue --> <template> <div class="container"> <h3>子组件标题</h3> <slot></slot> <!-- 默认插槽占位 --> </div> </template> <!-- 父组件使用 --> <child-component> <p>这是父组件传递的内容</p> </child-component> ``` *效果:`<p>`标签内容会出现在子组件`<slot>`位置[^1]* #### 二、具名插槽 2. **多内容区域分配**(通过命名区分不同插槽) ```html <!-- 子组件 Layout.vue --> <template> <div> <header> <slot name="header"></slot> </header> <main> <slot></slot> <!-- 默认插槽 --> </main> </div> </template> <!-- 父组件使用 --> <layout> <template slot="header"> <h1>自定义头部</h1> </template> <p>主要内容区域</p> </layout> ``` *说明:使用`slot="name"`指定插入目标[^2]* #### 三、作用域插槽 3. **子组件向父组件传递数据** ```html <!-- 子组件 DataList.vue --> <template> <ul> <li v-for="item in items" :key="item.id"> <slot :item="item">{{ item.defaultText }}</slot> </li> </ul> </template> <!-- 父组件使用 --> <data-list :items="listData"> <template slot-scope="props"> <span class="highlight">{{ props.item.customText }}</span> </template> </data-list> ``` *特性:通过`slot-scope`接收子组件数据[^2]* #### 四、最佳实践 4. **组合应用示例**(后台管理系统布局) ```html <!-- 布局组件 AdminLayout.vue --> <template> <div class="admin-layout"> <div class="sidebar"> <slot name="sidebar"></slot> </div> <div class="content"> <slot></slot> </div> </div> </template> <!-- 使用示例 --> <admin-layout> <template slot="sidebar"> <nav-menu :items="menuItems"/> </template> <data-table :columns="tableColumns"/> </admin-layout> ``` #### 五、常见问题解决 **问题1:插槽内容不显示** - 检查父组件是否在子组件标签内添加内容 - 确认具名插槽的命名一致性 **问题2:作用域数据未传递** - 确保子组件`<slot>`使用数据绑定`:dataName="dataValue"` - 父组件正确声明`slot-scope`接收变量
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值