5-7 组件及组件间的通信-slot内容分发

目录：

  •  slot内容分发
  • 为什么要用slot内容分发
  • 单个slot
  • 具名slot

一、slot内容分发

　　slot本意：位置、槽

　　作用：用来获取组件中的原内容，它其实是一个组件，在Vue api中：slot

　　slot分类：单个slot，具名slot

二、为什么要用slot内容分发？

根据我们之前学的东西，看下如下代码：

<body>
    <div id="box">
        <!--在引用组件内部，添加内容-->
        <my-hello>teacher gao is very handsome</my-hello>
    </div>
    
    <!--my-hello的引用模板-->
    <template id="hello">
        <div>
            <h3>欢迎来到高哥哥的博客园</h3>
        </div>
    </template>

    <script src="../vue.js"></script>
    <script>
        let vm = new Vue({
            el: "#box",
            components:{
                'my-hello':{  //局部组件my-hello
                    template: "#hello"
                }
            }
        });
    </script>
</body>

看下页面输出结果：

欢迎来到高哥哥的博客园

我们再来看看 引用组件中间还有我们想要输出的内容，如下：

<my-hello>teacher gao is very handsome</my-hello>

那如何获取呐，这个时候就要用到 slot 内容分发了。

三、单个slot

单个slot，又叫匿名slot，它是没有名字的，会获取你引用组件中的内容，并且在页面上显示出来，例子如下：

<body>
    <div id="box">
        <my-hello>teacher gao is very handsome</my-hello>
    </div>

    <template id="hello">
        <div>
            <h3>欢迎来到高哥哥的博客园</h3>

            <!--引用单个slot组件，获取<my-hello>组件中间的内容-->
            <slot></slot>  <!--<slot>如果没有原内容，则显示该内容</slot> => <my-hello>中没有值，就会显示：如果没有原内容，则显示该内容-->
        </div>
    </template>

    <script src="../vue.js"></script>
    <script>
       .....//上面的例子有
    </script>
</body>

输出内容如下：

欢迎来到高哥哥的博客园  #<my-hello>组件模板中h3显示的内容
teacher gao is very handsome  #<my-hello>teacher gao is very handsome</my-hello> 中间的内容

你看看，作用还是很大的吧。

三、具名slot

单个slot是蛮好的，但是有的时候吧，我在我的组件标签中，有多个标签，而且我想把标签放在不同的位置，这个时候只是一个单个slot是不够用的，那咋办呐？这个时候我们就用到具名slot。用法如下：

<div id="box">
    <my-compont>
        <!--2.使用具名slot-->
        <p  slot="slot名">高哥哥真帅!!!</p>
    </my-compont>
</div>


<template id="hello">
    <div>
        <!--1.定义具名slot位置-->
        <slot name="slot名"></slot>
    </div>
</template>

好了，废话不多少，直接上实例：

<body>
<div id="box">
    <my-hello>
        <p slot="s1">高哥哥真帅!!!</p>
        <p slot="s2">鸿哥哥真丑!!!</p>
    </my-hello>
</div>

<template id="hello">
    <div>
        <slot name="s1"></slot>
        <h3>欢迎来到高哥哥的博客园</h3>
        <slot name="s2"></slot>
    </div>
</template>
    <script src="../vue.js"></script>
    <script>
         .....//上面代码中有
    </script>
</body>

输出结果如下：

高哥哥真帅!!!    #<slot name="s1"></slot> => <p slot="s1">高哥哥真帅!!!</p>

欢迎来到高哥哥的博客园  #<h3>欢迎来到高哥哥的博客园</h3>

鸿哥哥真丑!!!   # <slot name="s2"></slot>  => <p slot="s2">鸿哥哥真丑!!!</p>

 这样有很好理解啦。有的时候具名slot和单个slot是配合使用的。

posted @ 2020-03-13 16:53  帅丶高高  阅读(275)  评论(0)    收藏  举报