0
点赞
收藏
分享

微信扫一扫

Vue基础知识:插槽——默认插槽,插槽的后备内容,具名插槽,作用域插槽的认识与使用。(slot,#default,row的认识)

1.插槽的基本认识:

作用:让组件内部的一些结构支持自定义
插槽的分类:

1.默认插槽(组件内只能定制一处结构)

2.具名插槽(组件内可以定制多次结构)

简单而言:就是你希望封装一个组件,这个组件会在多个地方使用,但是每个使用的地方其中的内容部分又是不同的,这个时候你希望自定义,就会运用到插槽。

2.默认插槽的基础语法:

1.组件内需要定制的部分用<slot></slot>占位

2.使用组件时,<组件名></组件名>在标签内容传入替换slot的内容

下面进行代码演示:

使用slot标签占位

 完成的效果图:

此时我们又会面临一个问题,如果我不给自定义内容,就不会有任何内容,这样一片空白实在是不好看。那我们如何加默认值(设置默认内容) 

3.插槽的后备内容:

1.语法:在<slot>标签内,放置内容,作为默认显示内容。

作用:1.组件标签使用时没有传入内容,会slot会显示后备内容。

2.组件标签使用时有传入内容,则slot会被整体替换掉。

下面进行代码演示:

 效果图:

4.插槽—具名插槽(具有名字的插槽)

上面已经讲解了默认插槽,但是它有一个明显的缺点就是只能定制一个地方。而下面所说的具名插槽就可以很好的解决这个问题。

作用:一个组件内有多处结构,需要外部传入标签,进行定制。

1.具名插槽语法:

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

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

3.为了方便官方(v-slot:插槽名可以简写成#插槽名

下面进行代码演示:

效果图:

使用#插槽名演示

 5.作用域插槽(是插槽的一个传参语法):

作用域插槽:定义slot插槽的同时,可以传值的,给插槽上可以绑定数据,将来使用组件时可以使用。

使用场景:

1.父传子需要渲染内容时

2.比如我们常使用的删除、编辑等功能都需要当前项的id值,但是id属于组件内部的数据通过作用域插槽传值绑定,进而使用。

作用域插槽的基本使用步骤:

1.给slot标签,已添加属性的方式传值

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

3.在template中,通过“#插槽名字=“obj””接收(这里的obj可以自定义,就是个对象名而已),默认插槽名为default

下面进行代码演示:

组件: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.会将所用的属性添加到一个对象中去 -->
        </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;
}
.my-table td:last-child {
  border-right: none;
}
.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>

下面是App.vue代码:

 

<template>
  <div>
    <!-- :data="list"相当于父传子 -->
    <MyTable :data="list">
      <!-- 注意要用<template></template>包裹 -->
      <!-- 由于我们使用的是默认插槽,所以用default -->
      <!-- 3.通过template #插槽名="变量名" 接收 -->
      <template #default="obj">
      <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 },
      ]
    }
  },
  components: {
    MyTable
  },
  methods:{
    del(id){
      this.list=this.list.filter(item=>item.id!==id)
    },
    show(row){
      console.log(row)
    }
  }
}
</script>

效果图:

举报

相关推荐

0 条评论