? 插槽(基本使用、具名插槽、作用域插槽等演示用例)

心叶

作者:心叶
时间:2019-08-30 16:38

纯洁的VUE开发项目,最新版本,可供直接使用:https://github.com/AC-angle/V...

基本使用

组件通过slot预留位置,使用组件的时候,可以通过传递具体的内容去替换slot占用的地方,这就是插槽。

比如现在定义了一个组件:

<!--
simple-use.vue
-->
<template>
  <div>
    <slot></slot>
  </div>
</template>

组件<slot></slot>占用的位置具体内容不确定,需要使用的时候传递进来,我们就可以这样使用:

<simple-use>
  <em style='color:red'>传递给插槽的内容(可以是文本,标签或者组件等)</em>
</simple-use>

运行后的效果如下:
图片描述

后备内容

有时候,我们可能希望slot有一个自己的默认值,在没有传递数据给组件的时候,使用默认数据。
想实现这样给功能很简单,只要在slot直接添加默认值即可,比如:

<!--
default-content.vue
-->
<template>
  <div>
    <slot>
      没有传递数据时候的默认值
    </slot>
  </div>
</template>

使用的时候就可以传递或者不传递数据:

<default-content></default-content>
<default-content>这是传递的数据</default-content>

运行效果截图:
图片描述

我们看见,第一个选择了默认数据,第二个使用了传递进去的数据。

具名插槽

有时候slot可能有多个,为了对应起来,可以给slot起名字,传递的时候对应起来。

还是看一个例子:

<!--
name-slot.vue
-->
<template>
  <ul>
    <li>
      <slot name='index1'></slot>
    </li>
    <li>
      <slot name='index2'></slot>
    </li>
    <li>
      <slot></slot>
    </li>
  </ul>
</template>
<style scoped>
ul > li {
  display: inline-block;
  background-color: aqua;
  color: white;
  padding: 10px;
}
</style>

我们定义了三个slot,其中二个名字分别叫index1和index2,第三个没有定义名称,默认名称是default,因此,我们在使用的时候就需要这样使用:

<name-slot>
  <template v-slot:index1>
    地方1
  </template>
  <template v-slot:index2>
    地方2
  </template>
  <template v-slot:default>
    默认地方
  </template>
</name-slot>

我们通过v-slot:name的方式把template模板和slot对应了起来,因此运行后的效果就是:

图片描述

作用域插槽

有时候我们希望在使用组件的是,让插槽内容访问子组件中的数据,可以通过插槽 prop这个特性实现。

依旧看看组件代码:

<!--
scope-slot.vue
-->
<template>
  <div>
    <slot v-bind:message='message'></slot>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "来自子组件中的数据"
    };
  }
};
</script>

使用的时候,我们需要接收一下:

<scope-slot>
  <template v-slot:default='sub_scope'>
    {{sub_scope.message}}
  </template>
</scope-slot>

最后是运行截图:
图片描述

阅读 1.3k

Vue2学习之旅
从基础开始学习vue2

我还惊讶地意识到, 在我生命中有很多时刻, 每当我遇到一个遥不可及、令人害怕的情境,并感到惊慌失措...

303 声望
114 粉丝
0 条评论

我还惊讶地意识到, 在我生命中有很多时刻, 每当我遇到一个遥不可及、令人害怕的情境,并感到惊慌失措...

303 声望
114 粉丝
文章目录
宣传栏