vue--组件机制--插槽slot

最新推荐文章于 2024-10-02 21:23:21 发布

米卡小米

最新推荐文章于 2024-10-02 21:23:21 发布

阅读量513

点赞数

分类专栏： Vue 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/cmy741741/article/details/121582970

版权

Vue 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

普通插槽

插槽允许我们在调用子组件的时候为子组件传递模板。

子组件 <navigation-link>
<a v-bind:href="url" class="nav-link" > <slot>default</slot> </a>
父组件
<navigation-link url="/profile"> Your Profile </navigation-link>

当组件渲染的时候，<slot></slot> 将会被替换为“Your Profile”。插槽内可以包含任何模板代码，甚至是其他组件。如果从函数的角度来理解，slot为形式参数，而navigation-link中的内容就为实参。Slot标签内部的内容为默认值，也就是当调用navigation-link组件的时候没有设置插槽内容，则组件插槽内容默认为default.

具名插槽

在一个组件中有多个插槽，调用的时候为了给不同的组件传递参数就需要为插槽进行命名。

子组件 <base-layout>
<div class="container">
   <header> <slot name="header"></slot> </header>
   <main> <slot></slot> </main>
   <footer> <slot name="footer"></slot> </footer>
</div>
父组件
<base-layout>
   <template v-slot:header> <h1>Here might be a page title</h1> </template>
</base-layout>

传递到插槽中的模板可以封装到template标签中。从函数角度出发，具名插槽可以理解为是传递了多个不同参数。

作用域插槽

子组件 <current-user>
<span> <slot v-bind:user="user"> {{ user.lastName }} </slot> </span>
        这里将user这个变量作为slot的一个参数进行绑定，目的是为了让父组件可以访问

父组件
<current-user>
   <template v-slot:default="slotProps"> {{ slotProps.user.firstName }} </template>
</current-user>

        通过slotProps可以访问到绑定到插槽中的所有属性，除了使用slotProps接受所有的属性外，还可以通过解构形式获取从函数角度来理解，作用域插槽实际上为回调函数

缩写
与v-bind、v-on类似，v-slot也具有缩写形式，即把参数之前的所有内容 (v-slot:) 替换为字符 #。

例如 v-slot:header 可以被重写为 #header

插槽应用

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id="app">
    <my-table :data="teachers">
      <template #header>
        <th>姓名</th>
        <th>性别</th>
        <th>工资</th>
        <th>教龄</th>
      </template>
      <template #td="{ item }">
        <td>{{item.name}}</td>
        <td>{{item.gender}}</td>
        <td>{{item.salary}}</td>
        <td>{{item.age}}</td>
      </template>
    </my-table>
  </div>

  <script>
    let component = {
      props: {
        data: {
          type: Array,
          required: true
        }
      },
      data() {
        return {}
      },
      template: `
        <table>
          <thead>
            <tr>
              <slot name="header"></slot>
            </tr>
          </thead>  
          <tbody>
            <tr v-for="(item, index) in data">
              <slot name="td" :item="item"></slot>
            </tr>
          </tbody>
        </table>
      `
    }
    let vm = new Vue({
      el: "#app",
      data: {
        teachers: [
          { name: '李老师', gender: 'male', salary: '5000', age: '35' },
          { name: '王老师', gender: 'female', salary: '6000', age: '38' },
          { name: '张老师', gender: 'male', salary: '7000', age: '42' },
        ],
        students: [
          { name: '张三', gender: 'male', grade: '350' },
          { name: '李四', gender: 'female', grade: '380' },
          { name: '王五', gender: 'male', grade: '420' },
        ]
      },
      methods: {

      },
      created() {

      },
      components: {
        myTable: component
      }
    })
  </script>
</body>

</html>