插槽的使用

目前所发的所有文章都是为了记录自己学习与工作当中遇到的问题，如果有不合适的地方欢迎各位指正

插槽自我理解就是一个占位符，但不是传统意义的那种，一占多位，而是一站多位

匿名插槽 slot.js

<template>
  <div class="box">
    <div class="header">
      <h5>{{title}}</h5>
    </div>
    <div class="conter">
      <slot>自定义的</slot>
    </div>
    <div class="footer">
      <button>确认</button>
      <button>取消</button>
    </div>
  </div>
</template>

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

<style scoped>
.box{
  border: 1px solid #ccc;
}
.header{
  background-color: rgb(45, 165, 221);
}
.footer{
  display: flex;
  justify-content: flex-end;
  padding:  10px
}
.conter{
  text-align: center;
}
</style>

app.js

<template>
  <div id="app">
    <HelloWorld title="有插槽">
      <div>
        <h6>中间部分2</h6>
      </div>
    </HelloWorld>

 <HelloWorld title="没有插槽">

 </HelloWorld>   
 <HelloWorld title="插槽表格">
    <table>
      <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
      </tr>
      <tr>
        <td>张三</td>
        <td>20</td>
        <td>男</td>
      </tr>
      <tr>
        <td>李四</td>
        <td>21</td>
        <td>女</td>
      </tr>
    </table>

 </HelloWorld>
  </div>
</template>

<script>
import HelloWorld from './components/slot.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
table{
  text-align: center;
  margin: auto;
  border: 1px solid #ccc;
  border-collapse: collapse;
}
td,th{
  border: 1px solid #ccc;
  padding: 10px;
}

</style>

具名插槽

<template>
  <div class="box">
    <div class="header">
      <slot name="title">默认的标题</slot>
    </div>
    <div>
      <slot name="conter">默认的的内容</slot>
    </div>
    <div class="footer">
      <slot name="footer">默认的底部</slot>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style  scoped>
.box{
    border: 1px solid #ccc;
    text-align: center;
    padding: 20px 0;
}

</style>

app.vue

<template>
  <div id="app">
    <HelloWorld></HelloWorld>


    <HelloWorld>
      <template v-slot:title>
       <h3 style="color: red;">具名插槽的标题</h3> 
      </template>
      <template #conter> 具名插槽的内容 </template>
      <template #footer> <h5 style="background-color: blueviolet;">具名插槽的底部</h5>  </template>
      </HelloWorld>

  </div>
</template>

<script>
import HelloWorld from "./components/slotname.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

<style>
table {
  text-align: center;
  margin: auto;
  border: 1px solid #ccc;
  border-collapse: collapse;
}
td,
th {
  border: 1px solid #ccc;
  padding: 10px 0;
}
</style>

作用域插槽

<template>
  <div>
    <div>
      <slot name="title" :user="person"></slot>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            person:{
                name:"张三",
                sex:'女',
                age:18
            }
        }
    },
};
</script>

<style  scoped>
</style>

app.vue

<template>
  <div id="app">
    <HelloWorld >
      <template v-slot:title="{user}" > 姓名:{{user.name}}性别:{{user.sex}}年龄:{{user.age}}</template>
    </HelloWorld>


  </div>
</template>

<script>
import HelloWorld from "./components/slotzuoyong.vue";

export default {
  name: "App",
  components: {
    HelloWorld,
  },
};
</script>

<style>
</style>

执行结果：姓名:张三性别:女年龄:18