Vue简单实例——slot插槽的简单运用

Error_exception_worn

已于 2022-10-21 22:31:16 修改

阅读量438

点赞数

文章标签： vue.js 前端 javascript

于 2022-10-21 21:57:17 首次发布

本文链接：https://blog.csdn.net/hssjsh/article/details/127452926

版权

本文详细介绍了Vue.js中的插槽用法，包括默认插槽、具名插槽和作用域插槽。默认插槽用于在父组件中插入内容到子组件的预设位置；具名插槽通过name属性为插槽命名，允许在子组件中定义多个插槽；作用域插槽则允许父组件访问子组件的数据并自定义渲染方式。示例代码展示了如何在实际开发中应用这些插槽特性。

摘要由CSDN通过智能技术生成

简单介绍：

插槽的使用场景是当子组件中的部分内容需要父组件决定的时候，实现固定部分和动态部分的结合，从而更加灵活高效的进行页面的开发，插槽分为默认插槽，具名插槽和作用域插槽

默认插槽：最简单的插槽的使用方式

子组件中的内容：

<template>
<div>
<!--  slot标签的作用是指定插槽的位置,如果不设置slot标签直接在子组件标签中写入代码,会导致无法显示-->
  <slot>
<!--    设置插槽的默认显示内容-->
    <p>当父组件中没有设置插槽的时候会显示的默认内容</p>
  </slot>
</div>
</template>

<script>
export default {
  name: "slot_demo"
}
</script>

<style scoped>

</style>

App组件中的内容：

<template>
  <div id="app">
    <slot_demo>
<!--      在子组件的标签中写入插槽的内容-->
      <p>这里是插槽的内容</p>
    </slot_demo>
<!--    当父组件中不设置插槽的内容的时候会显示子组件中设置的默认插槽的位置-->
    <slot_demo></slot_demo>
  </div>
</template>

<script>


import slot_demo from "@/components/slot_demo";

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

注意点：

插槽的位置是在子组件中决定的，父组件中决定的是插槽的内容。如果不在子组件中设定slot标签指定插槽内容的位置会导致插槽的内容无法显示

具名插槽：一个具有名字属性的插槽

子组件中的内容：

<template>
<div>
  <slot name="slot_1">
    <p>这里是第一个插槽的默认内容</p>
  </slot>
  <slot name="slot_2">
    <p>这里是第二个插槽的默认内容</p>
  </slot>
</div>
</template>

<script>
export default {
  name: "slot_demo"
}
</script>

<style scoped>

</style>

App组件中的内容：

<template>
  <div id="app">
    <slot_demo>
      <template v-slot:slot_1>
        <p>这里是第一个插槽的内容</p>
      </template>
    </slot_demo>
  </div>
</template>

<script>


import slot_demo from "@/components/slot_demo";

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行结果：

注意点：

在子组件的slot标签上加入一个name属性，设定只属于这个插槽的名字，在父组件的子组件标签中，使用template标签，并在标签上使用“v-slot:插槽名”的方式将内容放置在固定的插槽中，可以看到当我们只给第一个插槽防止内容而第二个插槽没有设定的时候，是会出现上面的效果的，而当我们设定了插槽的内容而没有设定要让那个插槽显示时，是不会出现插槽的效果的。

作用域插槽：当我们想让在父组件的插槽格式中访问到子组件的数据的时候，就可以使用作用域插槽

子组件中的内容：

<template>
<div>
  <slot :msg="game"></slot>
</div>
</template>

<script>
export default {
  name: "slot_demo",
  data(){
    return {
      game:['掠食','龙族','光环']
    }
  }
}
</script>

<style scoped>

</style>

App组件中的内容：

<template>
  <div id="app">
    <slot_demo v-slot:default="games">
      <ul>
<!--        在传递数据的时候,接收到的是数据的一个对象,要使用接收到的对象.数据的方式获取具体想要的数据-->
        <li v-for="item in games.msg" :key="item">{{item}}</li>
      </ul>
    </slot_demo>
  </div>
</template>

<script>


import slot_demo from "@/components/slot_demo";

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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

运行结果：

注意点：

当我们有需求是从子组件中获取数据，在父组件中用不同的样式进行渲染的时候，就可以使用作用域插槽，当然这只是作用域插槽的一个使用场景。在我们使用的时候，在子组件中使用v-bind绑定一个属性，属性值为我们想要传输的数据。在父组件中，使用v-slot:default="属性名"的方式进行接受。这时需要注意，我们接收到的数据实际上是一个存放了数据的对象集合，需要用“接收数据的属性名.发送数据的属性名”的方式进行精确的接受需要的数据才可以真正获取到想要的数据。注意这里所有的属性名都是自定义的。