插槽（64-67）

news2024/9/27 2:47:48

文章目录

插槽
- 1.插槽 - 默认插槽(组件内可以定制一处结构)
- 2.插槽 - 后备内容（默认值）
- 3.插槽 - 具名插槽(组件内可以定制多处结构)
- 4.作用域插槽(插槽的一个传参语法)

插槽

插槽分类:默认插槽和具名插槽

1.插槽 - 默认插槽(组件内可以定制一处结构)

作用：让租价内部的一些结构支持自定义
需求：要在页面中显示一个对话框，封装成一个组件
问题：组件的内容部分，不希望写死，希望能够使用的时候自定义怎么办？（插槽）

在这里插入图片描述
插槽的基本语法：

组件内需要定制的结构部分，改用<slot></slot>
使用组件时，<MyDialog></MyDialog>内部标签，传入结构替换slot

<template>
	<div class="dialog">
		<div class="dialog-header">
			<h3>友情提示</h3>
		</div>

		<div class="dialog-content">
			<slot></slot>//用slot占位  //<MyDialog>
										你去确定要退出本系统吗
		</div>							<MyDialog>	//会被填入slot位置
		<div class="dialog-footer">
			<button>取消</button>
			<button>确认</button>
		</div>
	</div>
</template>

App.vue
<template>
  <div>
    <!-- 在我们使用组件时，在组建标签内填入内容 -->
    <MyDialog>
      你确认要删除吗
    </MyDialog>
    <MyDialog>
      你确认要退出吗
    </MyDialog>
  </div>
</template>

~.vue
<template>
  <div class="dialog">
    <div class="dialog-header">
      <h3>友情提示</h3>
      <span class="close">✖️</span>
    </div>

    <div class="dialog-content">
      <!-- 在需要定制的位置，使用slot占位 -->
      <slot></slot>
    </div>
    <div class="dialog-footer">
      <button>取消</button>
      <button>确认</button>
    </div>
  </div>
</template>

2.插槽 - 后备内容（默认值）

前言：通过插槽完成了内容的定制，传什么显示什么，但是如果不传，则是空白
插槽的后备内容：封装组件时，可以为预留的```插槽提供后备内容（默认内容）

语法：在<slot>标签内，防止内容，作为默认内容

3.插槽 - 具名插槽(组件内可以定制多处结构)

需求：一个组件内有多处结构，需要外部传入标签。进行定制
默认插槽：一个的定制位置

具名插槽语法：

多个slot使用name属性区分名字

template配合v-slot名字来分发对应的标签

v-slot：插槽名可以简化成 #插槽名

4.作用域插槽(插槽的一个传参语法)

作用域插槽:定义 slot 插槽的同时,是可以传值的.给插槽上可以绑定数据,将来使用组件时可以用
场景:封装表格组件(表格长得一样,但是数据不一样)
在这里插入图片描述

通过父传子,将数据传递进去,动态渲染表格内容
利用默认插槽定制操作这一列
删除或查看都需要用到当前的id ,属于组件内部的数据,通过作用域插槽传值绑定,进而使用

基本使用步骤:

给slot标签,以添加属性的方式传值

所有添加的属性,都会被收集到一个对象中

在template.同股票 #插槽名="obj"接收(这个obj``是一个局部变量,我们可以起成不同的名字),默认插槽名为default`

App.vue
<template>
  <div>
    <MyTable :data="list">
      <template #default="obj">
        <!--通过template #插槽名="变量名"接收-->
        <button @click="del(obj.row.id)">删除</button>
      </template>
    </MyTable>
    <MyTable :data="list2">
      <template #default="{ row }">
        <button @click="show(row)">查看</button>
      </template>
    </MyTable>
  </div>
</template>

<script>
import MyTable from './components/MyTable.vue'
export default {
  data () {
    return {
      list: [
        { id: 1, name: '张小花', age: 18 },
        { id: 2, name: '孙大明', age: 19 },
        { id: 3, name: '刘德忠', age: 17 },
      ],
      list2: [
        { id: 1, name: '赵小云', age: 18 },
        { id: 2, name: '刘蓓蓓', age: 19 },
        { id: 3, name: '姜肖泰', age: 17 },
      ]
    }
  },
  methods:{
    del(id){
      this.list=this.list.filter(item => item.id !==id)
    }, 
    show (row) {
      console.loh(row)
      alert(`姓名: ${row.name}; 年纪: ${row.age}`)
    }
  },
  components: {
    MyTable
  }
}
</script>


~.vue
<template>
  <table class="my-table">
    <thead>
      <tr>
        <th>序号</th>
        <th>姓名</th>
        <th>年纪</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in data" :key="item.id">
        <td>{{ index + 1 }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.age }}</td>
        <td>
          <!-- 1.给slot标签，添加属性名以传参 -->
          <slot :row="item" msg="测试文本"></slot><!--苛以在插槽的位置传参，方便删除del()-->
          <!-- 2.将所有属性，添加到一个对象中 -->
          <!--
            {
              row:{id:2,name:'孙大明'，age:19},
              msg:'测试文本'
            }
          -->
        </td>
      </tr>

    </tbody>
  </table>
</template>

<script>
export default {
  props: {
    data: Array,
  },
}
</script>