默认插槽，具名插槽（v-slot:具名，name=‘ ‘),作用域插槽

news2024/12/14 1:12:05

在App.vue父组件需要两次调用MyDialog子组件，但是想要两个子组件中略有不同。

1.首先在父组件中引入子组件，定义子组件，展示组件标签

2.不一样的地方在子组件中放<slot>标签占位

3.在父组件中的子组件标签中写上不一样的内容，就能展示两个略有不同的子组件了

给插槽设置默认值：

在slot标签中写上内容，如果组件标签中没有写入内容，那么就显示默认内容，如果组件标签中写入了内容，那么就显示组件标签中的内容

具名插槽：

1.子组件slot标签占位，给name属性起名字来区分各个部分插槽

2.父组件中子组件标签里用template标签包裹各个部分插槽内容，并且在各个template标签中使用v-slot = 插槽名来对应子组件中各个部分插槽

（子name ，父 v-slot :插槽名 / 父 #插槽名）

作用域插槽：

通过在父组件的子组件标签中向子组件传递数据，子组件props接收，通过v-for指令进行遍历渲染。

两个表单组件的不同之处在于一个最后一列是“删除”按钮，一个最后一列是“查看”按钮，其他一样，这时可通过slot标签定义不一样的按钮部分

删除部分按钮写在子组件标签中，需要注册一个删除事件，但是删除事件需要的 id 实参是来自子组件的，所以需用子组件slot标签以添加属性的方式传过来item，接着通过filter保留id不一样的数组中的对象

(写两份组件标签，两份标签格子传值，能渲染两份内容）

<!-- APP.vue -->
<template>
  <div>
    <MyTable :data="list">
      <!-- 通过template #插槽名=变量名来接收，obj（任取)接收的就是一整个对象 -->
      <template #default="obj">
        <button @click="del(obj.row.id)">删除</button>
      </template>
    </MyTable>
    <MyTable :data="list2">
      <!-- {row}直接解构 -->
      <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:20},
        {id:2,name:'李四',age:25},
        {id:2,name:'王五',age:26}
            ],
      list2:[
        {id:1,name:'小红',age:20},
        {id:2,name:'小明',age:26},
        {id:3,name:'小米',age:23}
      ]
    }
  },
  components:{
    MyTable,
  },
  methods:{
    del(id) {
      // v-for中遍历的是每一行item，将item与测试文本打包成对象传过来，通过插槽名=变量来接收，将对象中的id名作为实参传入button注册的事件中。该事件函数利用filter遍历数组中每个对象的id，将遍历到的每个id与传入的实参id进行比较，要是id不一样，就将遍历到的id的对象保留下来，然后就实现了点击到的id删除了的效果
      this.list=this.list.filter(item => item.id !== id)
    },
    show(row){
      // console.log(row)
      alert(`姓名：${row.name};年纪：${row.age}`)
    }
  }

}
</script>

<style>

</style>

<!-- MyTable.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>

          <!-- 2.将所有属性添加到一个对象里,是将这一整个对象传过去 -->
           <!-- 
          {
           row：{id:2,name:'李四'，age:25},
           msg:'测试文本'
           
           }
          
           -->
        </td>
      </tr>
    </tbody>
  </table>
  
</template>

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

<style scoped>
.my-table {
  width: 450px;
  text-align: center;
  border: 1px solid #ccc;
  font-size: 24px;
  margin: 30px auto;
}
.my-table thead {
  background-color: #1f74ff;
  color: #fff;
}
.my-table thead th {
  font-weight: normal;
}
.my-table thead tr {
  line-height: 40px;
}
.my-table th,
.my-table td {
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}
/* 选择每一行的最后一个td */
.my-table td:last-child {
  border-right: none;
}
/* 类下的最后一行的所有td */
.my-table tr:last-child td {
  border-bottom: none;
}
.my-table button {
  width: 65px;
  height: 35px;
  font-size: 18px;
  border: 1px solid #ccc;
  outline: none;/* 去掉按钮的虚线边框 */
  border-radius: 3px;
  cursor: pointer;
  background-color: #ffffff;
  margin-left: 5px;
}
</style>