Vue2 06 插槽 slot

Vue2 06 插槽 slot
6.1 插槽 slot

插槽这个东西还是很重要的。我们都学习过 html 的列表吧。
```
<ul>
	<li>li>
ul>
1
2
3
```
其实插槽就类似于这里面的

。就是相当于标签下面的子标签。而我们插槽就可以实现这个东西。又因为是 Vue 写的，所以比原生态的强大很多。

我们知道，在 Vue 里面，只有组件的概念，没有标签的概念。

所以我们要新建一个自定义组件

新建自定义组件，并且设定好插槽！

\ 反斜杠在 template 的字符串值里面代表着回车换行！

  Vue.component("mqy",{
      template: '\\'
  })
1
2
3

建立那两个插槽应该插入的子组件。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽 slot 的应用title>
head>
<body>

<div id="vue">
    <mqy>
    mqy>
div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js">script>
<script>
  Vue.component("mqy",{
      template: '\\
'
  });

  Vue.component("mqy-title",{
      props: ['value'],
      template: '{{value}}
'
  });

  Vue.component("mqy-item",{
      props: ['value'],
      template: '{{value}}
'
  });

script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

slot 的使用方法

<div id="vue">
    <mqy>
        <mqy-title slot="mqy-title" v-bind:value="title">mqy-title>
        <mqy-item v-for="item in arr" slot="mqy-item" v-bind:value="item">mqy-item>
    mqy>
div>
1
2
3
4
5
6

slot="name名字" 意思是往父组件的哪个插槽的地方去插入！

data 里面写绑定的数据

  let vm = new Vue({
      el: "#vue",
      data: {
          title: "标题",
          arr: ["Java","前端","linux"]
      }
  })
1
2
3
4
5
6
7

成品

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽 slot 的应用title>
head>
<body>

<div id="vue">
    <mqy>
        <mqy-title slot="mqy-title" v-bind:value="title">mqy-title>
        <mqy-item v-for="item in arr" slot="mqy-item" v-bind:value="item">mqy-item>
    mqy>
div>


<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js">script>
<script>
  Vue.component("mqy",{
      template: '\\
'
  });

  Vue.component("mqy-title",{
      props: ['value'],
      template: '{{value}}
'
  });

  Vue.component("mqy-item",{
      props: ['value'],
      template: '{{value}}
'
  });

  let vm = new Vue({
      el: "#vue",
      data: {
          title: "标题",
          arr: ["Java","前端","linux"]
      }
  })


script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

在这里插入图片描述

微信小程序的框架，很多的组件，就用到了插槽。就是一个组件里面可能还有子组件。比如说 scroll 组件，里面就有 scroll-item 组件。

直接从 slot 里面拿到组件标签之间的 text 部分

有的人肯定会觉得这样子好麻烦呀，我就是想给这个组件设定一个数据为毛还要什么数据绑定？？难道不能直接是一个静态数据吗？比如说在 数据内容 组件标签之间拿到这个数据！

答案是：可以的！

this.$slots.default[0].text 就可以拿到组件标签之间的那个内容。在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽 slot 的应用title>
head>
<body>

<div id="vue">
    <mqy>
        <mqy-title slot="mqy-title" v-bind:value="title">Fuck！mqy-title>
        <mqy-item v-for="item in arr" slot="mqy-item" v-bind:value="item">mqy-item>
    mqy>
div>


<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.13/vue.js">script>
<script>
  Vue.component("mqy",{
      template: '\\
'
  });

  Vue.component("mqy-title",{
      props: ['value'],
      template: '{{this.$slots.default[0].text}}
'
  });

  Vue.component("mqy-item",{
      props: ['value'],
      template: '{{value}}
'
  });

  let vm = new Vue({
      el: "#vue",
      data: {
          title: "标题",
          arr: ["Java","前端","linux"]
      }
  })


script>
body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

在这里插入图片描述

6.1 插槽 slot