前端vue-插槽slot

最新推荐文章于 2024-06-28 09:44:50 发布

覆水难收呀

最新推荐文章于 2024-06-28 09:44:50 发布

阅读量1k

点赞数 2

分类专栏：测试开发文章标签：前端 vue.js html

本文链接：https://blog.csdn.net/Sean_0819/article/details/126524182

版权

测试开发专栏收录该内容

34 篇文章 7 订阅

订阅专栏

一、匿名插槽

slotDemo.vue （子组件）:

父组件用到子组件的时候，子组件可以预留一个插槽供父组件使用。

父组件在引用这个子组件的时候，中间添加的 <h1>使用slotDemo时在标签中间写的内容</h1> 就是子组件给父组件预留插槽展示的地方，否则不会展示出来

<template>
  <div class="left">
    <slot></slot>
  </div>
  <div class="right"></div>
</template>

<script></script>

<style scoped>
.left {
  width: 400px;
  height: 400px;
  background: skyblue;
  float: left;
}

.right {
  width: 400px;
  height: 400px;
  background: pink;
  float: left;
}
</style>

App.vue (父组件)：

<template>
  <slotDemo>
    <h1>使用slotDemo时在标签中间写的内容</h1>
  </slotDemo>
</template>

<script>
import slotDemo from './components/slotDemo.vue';
export default {
  name: 'App',
  components: {
    slotDemo: slotDemo,
  },
};
</script>

<style></style>

页面展示:

二、具名插槽

需求来了，我需要指定一些东西填写到蓝色区域，我还需要指定一些东西在粉色区域，我该怎么做？

可以看到我们在子组件给插槽起了一个名字 <slot name="box11"></slot>

在父组件里通过template里添加 v-slot:box11

<h1>box11插槽填充内容</h1>

</template>

注意：(v-slot:) 可以简写为字符 #

例如：template v-slot:box22 可以简写为 template #box22

我们可以看父组件里

<h1>box2插槽填充内容</h1>

</template>

大家只要记住一句话，子组件里的slot的 name值要跟父组件里的 v-slot对应的值相对应，并且父组件里v-slot:box22要放在template里面。

子组件:

<template>
  <div>
    <div class="left">
      <slot name="box11"></slot>
    </div>

    <div class="right">
      <slot></slot>
    </div>

    <div class="box2">
      <slot name="box22"></slot>
    </div>
    
  </div>
</template>

<script></script>

<style scoped>
.left {
  width: 400px;
  height: 400px;
  background: skyblue;
  float: left;
}

.right {
  width: 400px;
  height: 400px;
  background: pink;
  float: left;
}

.box2 {
  width: 400px;
  height: 400px;
  background: red;
  float: left;
}
</style>

父组件：

<template>
  <slotDemo>
    <h1>粉色区域</h1>

    <template v-slot:box11>
      <h1>box11插槽填充内容</h1>
    </template>

    <template #box22>
      <h1>box2插槽填充内容</h1>
    </template>
  </slotDemo>
</template>

<script>
import slotDemo from './components/slotDemo.vue';
export default {
  name: 'App',
  components: {
    slotDemo: slotDemo,
  },
};
</script>

<style></style>

页面展示：

三、作用域插槽

1、我们先看饿了么plus上面的作用域插槽

<template #default="scope">

<el-tag>{{ scope.row.date }}</el-tag>
</template>

子组件：

<template>
  <el-table :data="tableDate" style="width: 100%">
    <!-- label:表头名字  prop:表示每一列展示什么数据-->
    <el-table-column label="日期" width="180">
      <template #default="scope">
        <!-- 使用插槽传递过来的数据 -->
        <el-tag>{{ scope.row.date }}</el-tag>
      </template>
    </el-table-column>

    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
    <el-table-column prop="address" label="Address" />
    <el-table-column label="操作" />
  </el-table>
</template>

<script>
export default {
  data() {
    return {
      tableDate: [
        {
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
        {
          date: '2016-05-02',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles',
        },
      ],
    };
  },
};
</script>

<style></style>

父组件:

<template>
  <slotDemo>
    <h1>粉色区域</h1>

    <template v-slot:box11>
      <h1>box11插槽填充内容</h1>
    </template>

    <template #box22>
      <h1>box2插槽填充内容</h1>
    </template>
  </slotDemo>

  <el-input v-model="user">
    <template v-slot:prepend> 账号 </template>
    <template v-slot:append> 要求字母开头不超过16位 </template>
  </el-input>

  <!-- 作用域插槽 -->
  <slotDemo2></slotDemo2>
</template>

<script>
import slotDemo from './components/slotDemo.vue';
import slotDemo2 from './components/slotDemo2.vue';
export default {
  name: 'App',
  components: {
    slotDemo: slotDemo,
    slotDemo2,
  },
  data() {
    return {
      user: '',
      pwd: '',
    };
  },
};
</script>

<style></style>

2、如果我们自己写的子组件，怎么用插槽去给我们主组件传数据。

子组件里在你想要的插槽里写入

</div>

父组件里写入：

<h1>box2插槽填充内容-----{{ scope.title }}</h1>

</template>

</slotDemo>

子组件：

<template>
  <div>
    <div class="left">
      <slot name="box11"></slot>
    </div>

    <div class="right">
      <slot></slot>
    </div>

    <div class="box2">
      <slot name="box22" title="哈哈哈哈"></slot>
    </div>
  </div>
</template>

<script></script>

<style scoped>
.left {
  width: 400px;
  height: 400px;
  background: skyblue;
  float: left;
}

.right {
  width: 400px;
  height: 400px;
  background: pink;
  float: left;
}

.box2 {
  width: 400px;
  height: 400px;
  background: red;
  float: left;
}
</style>

主组件：

<template>
  <slotDemo>
    <h1>粉色区域</h1>

    <template v-slot:box11>
      <h1>box11插槽填充内容</h1>
    </template>

    <template #box22="scope">
      <h1>box2插槽填充内容-----{{ scope.title }}</h1>
    </template>
  </slotDemo>

  <el-input v-model="user">
    <template v-slot:prepend> 账号 </template>
    <template v-slot:append> 要求字母开头不超过16位 </template>
  </el-input>

  <!-- 作用域插槽 -->
  <slotDemo2></slotDemo2>
</template>

<script>
import slotDemo from './components/slotDemo.vue';
import slotDemo2 from './components/slotDemo2.vue';
export default {
  name: 'App',
  components: {
    slotDemo: slotDemo,
    slotDemo2,
  },
  data() {
    return {
      user: '',
      pwd: '',
    };
  },
};
</script>

<style></style>

页面展示：