您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

Vue 插槽的使用

本小节我们将介绍如何使用插槽slot,认插槽、具名插槽、作用域插槽。插槽可以使组件的模版变得多样性,让在使用组件时可以传入模版。在复杂组件中,当我们在使用多个插槽的时候将会是难点。但是也不必担心,只要我们将每个插槽类型的使用学透,相信面对任何复杂插槽的使用的时候都可以游刃有余。

Vue 实现了一套分发的 API,将 元素作为承载分发的出口。 —— 官方定义

<slot>元素作为承载分发的出口,可以理解为占位符,或者说是子组件暴露的让父组件传入的接口。插槽内可以包含任何模板, HTML,甚至其他的组件。在工作中如果你的组件内的是可变的,这个时候我们可以考虑使用插槽。

<slot>有三种类型,他们分别是:

接下来,我们将一步步介绍这三种不同插槽的使用方式。

在组件中使用<slot />进行占位,当我们使用该组件时,在组件内写入需要展示的具体:

{
  components: {
    'MyConponent': {
      template: '<div><slot /></div>'
    }
  }
}
<my-conponent>这里是要的插槽!</my-conponent>

我们用简单的示例来学习以下如何使用认插槽:

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-component>
      句号
    </my-component>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('myComponent', {
    template: '<div>Hello !<slot></slot></div>'
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>

解释:
在 JS 第 3-5 行,我们通过 Vue.Component 了全局组件 myComponent,并在组件内部使用了认插槽 slot,在 html 中使用插槽( 2-4 行),并在内传入组件内需要展示的插槽。

具名插槽就是给<slot /> name 。语法:<my-component><slot name="插槽名字"/></my-component>

{
  components: {
    'MyConponent': {
      template: '<div><slot name="hello"/></div>'
    }
  }
}
<my-conponent>
  <template slot="hello"></template>
</my-conponent>

我们用简单的示例,来学习一下如何使用具名插槽:

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <my-component>
      <span slot="name">句号</span>
      <span slot="time">2020-02-02</span>
    </my-component>
  </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('myComponent', {
    template: '<div>Hello !<slot name="name"></slot> <slot name="time"></slot></div>'
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>

解释:
在 JS 第 4-6 行,我们通过 Vue.Component 了全局组件 myComponent,并在组件内部使用了两个具名插槽 name 和 time,在 html 中使用具名插槽( 2-5 行),并在内传入组件需要展示的插槽。

有时候,我们在父组件使用插槽时需要访问子组件中的数据,这时候就需要使用作用域插槽。:将 data 变量名 作为 <slot> 元素的 attribute 绑定上去:

<slot :[变量名]="[需要传入的数据]"></slot>
<!-- 示例 -->
<slot :count="count"></slot>
```,
在使用组件时,通过`v-slot:插槽名字="数据别名"`的方式使用。
```html
<!-- 认插槽中使用作用域插槽 -->
<my-component>
  <template v-slot:default="slotProps">
    {{slotProps.count}}
  </template>
</my-component>

<!-- 具名插槽中使用作用域插槽 -->
<my-component>
  <template v-slot:插槽名字="slotProps">
    {{slotProps.count}}
  </template>
</my-component>

下面我们通过两个例子详细介绍,如何在认插槽和具名插槽中,使用作用域插槽。

对于认插槽我们可以省略v-slot后面的插槽名,直接使用v-slot="数据别名"的方式:
示例:

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <div id="app">
        <my-component>
          <!-- 使用 v-slot 接收认插槽的数据,并把数据命名为  slotProps-->
          <template v-slot:default="slotProps">
            <br />
            <!-- 使用 插槽数据-->
            我叫:{{slotProps.detail.name}},我的爱好是:{{slotProps.detail.love}}
          </template>
        </my-component>
        <my-component>
          <!-- 认插槽可以忽略v-slot后面的插槽名-->
          <template v-slot="slotProps">
            <br />
            <!-- 使用 插槽数据-->
            我叫:{{slotProps.detail.name}},我的爱好是:{{slotProps.detail.love}}
          </template>
        </my-component>
      </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('myComponent', {
    // 在认插槽中传入数据 detail
    template: '<div>Hello !<slot :detail="detail"></slot></div>',
    data() {
      return {
        detail: {
          name: '句号',
          love: 'coding'
        }
      }
    }
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>

解释:
在 JS 第 3-14 行,我们通过 Vue.Component 了全局组件 myComponent。

在 HTML 第 2-8 行,使用 v-slot:default=“数据别名” 的方式接收认插槽的数据,并把数据命名为 slotProps。

在 HTML 第 9-16 行,使用 v-slot=“数据别名” 的方式接收认插槽的数据(省略认插槽名),并把数据命名为 slotProps。

具名插槽必须在v-slot后面插槽名,否则数据无法在具名插槽中使用:
示例:

<!DOCTYPE html>
<html lang="en">
<head>
  < charset="UTF-8">
  < name="viewport" content="width=device-width, initial-scale=1.0">
  < http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
    <div id="app">
        <my-component>
          <!-- 使用 v-slot 接收具名插槽 detail 的数据,并把它命名为  slotProps-->
          <template v-slot:detail="slotProps">
            <br />
            <!-- 使用 插槽 detail 的数据-->
            我叫:{{slotProps.detail.name}},我的爱好是:{{slotProps.detail.love}}
          </template>
        </my-component>
    </div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script type="text/javascript">
  Vue.component('myComponent', {
    // 定义具名插槽 detail 并传入数据 detail
    template: '<div>Hello !<slot :detail="detail" name="detail"></slot></div>',
    data() {
      return {
        detail: {
          name: '句号',
          love: 'coding'
        }
      }
    }
  })
  var vm = new Vue({
    el: '#app',
    data() {
    	return {}
    }
  })
</script>
</html>

在 JS 第 3-14 行,我们通过 Vue.Component 了全局组件 myComponent。
在 HTML 第 2-8 行,使用 v-slot:default=“数据别名” 的方式接收认插槽的数据,并把数据命名为 slotProps。

在本小节,我们介绍了组件中插槽的一些使用,主要有以下知识点:


联系我
置顶