vue插槽的基本使用

1.默认插槽

在Vue.js中，可以通过使用默认插槽来在组件中插入内容。默认插槽允许你在父组件中传递任意内容给子组件，并在子组件中使用这些内容。如果在子组件中的slot中写内容,则为默认内容,父组件未插入值的情况下显示,插入则被覆盖

父组件

<template>
 <div class="container">
  <Tip>你好</Tip>//这里插入的是文本,还可以插入标签,组件
 </div>
</template>
<script>
import Tip from '@/views/components/son.vue'
export default {
  components: { Tip },
}
</script>
<style lang='scss'  scoped>
.container{
  width: 100%;
  height: 100%;
  border: 1px solid red;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>

子组件

<template>
 <div>
    <div class="tip">
      <div class="up">
        //slot标签占位,父组件在子组件标签里插入的内容在这里显示
        <slot></slot>
      </div>
      <div class="down"></div>
    </div>
 </div>
</template>
<script>
export default {
  data () {
    return {

    }
  },
}
</script>
<style lang='scss'  scoped>
.tip{
  width: 200px;
  height: 100px;
  border: 1px solid pink;
  border-radius: 5px;

  .up{
    width: 100%;
    height: 50px;
    font-size: 16px;
    line-height: 50px;
    border-bottom:1px solid black ;
  }

  .down{
    width: 100%;
    height: 50px;
  }
}
</style>

2.具名插槽

在父组件页面的子组件标签中插入值,需要用template标签,v-slot:""指定这段内容是插入哪个插槽的

父组件

<template>
  <div class="container">
    <Tip>
      你好
      <template v-slot:title>
        <span style="color: red;">你好</span>
      </template>

    </Tip>
  </div>
</template>
<script>
import Tip from '@/views/components/chaCaoTest.vue'
export default {
  name: 'chaCao',
  components: { Tip },
  data () {
    return {

    }
  },
}
</script>
<style lang='scss' scoped>
//样式同上
</style>

子组件

<template>
 <div>
    <div class="tip">
      <div class="up">
        <slot ></slot>
        <slot name="title"></slot>
      </div>
      <div class="down"></div>
    </div>
 </div>
</template>
<script>
export default {
  data () {
    return {

    }
  },
}
</script>
<style lang='scss'  scoped>
//样式同上
}
</style>

3.作用域插槽

作用域插槽可以从子组件传递数据到父组件,写一个表格的例子
通过子组件的slot标签将子页面的数据传递到父组件

父组件

<template>
  <div class="container">
    //现将表格数据传给子组件
    <Tip :grades="grades">
      //这里自己设定一个变量来接受子组件插槽传递的数据,不一定是obj
      <template v-slot:default="obj">
        <!-- 简写 #default="obj" -->
        <button @click="del(obj)">删除</button>
      </template>
    </Tip>
  </div>
</template>
<script>
import Tip from '@/views/components/chaCaoTest.vue'
export default {
  name: 'chaCao',
  components: { Tip },
  data () {
    return {
      grades: [
        { id: 1, project1: 59, project2: 60, project3: 61 },
        { id: 2, project1: 59, project2: 60, project3: 61 },
        { id: 3, project1: 59, project2: 60, project3: 61 }
      ]
    }
  },
  methods: {
    del (e) {
      console.log(e, 666)
    }
  }
}
</script>
<style lang='scss' scoped>
.container {
  width: 100%;
  height: 100%;
  border: 1px solid red;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>

子组件

<template>
 <div class="container1">
    <table>
      <thead>
        <tr>
          <th>语文</th>
          <th>数学</th>
          <th>外语</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in grades" :key="item.id">
          <td>{{ item.project1 }}</td>
          <td>{{ item.project2 }}</td>
          <td>{{ item.project3 }}</td>
          <td>
          	//将数据传递给父组件
            <slot :item="item"></slot>
          </td>
        </tr>
      </tbody>
    </table>
 </div>
</template>
<script>
export default {
  props: ['grades'],
  data () {
    return {

    }
  },
}
</script>
<style lang='scss'  scoped>
.container1{
  width: 50%;
  height: 50%;
}

table {
      border-collapse: collapse;
      width: 100%;
    }

    th, td {
      border: 1px solid #ddd; /* 设置细线边框的颜色和宽度 */
      padding: 8px;
      text-align: left;
    }

    th {
      background-color: #f2f2f2; /* 设置表头的背景颜色 */
    }
</style>