vue组件中插槽slot

川长思鸟来 2022-04-16 01:41 358阅读 0赞

**注意：slot标签中样式不生效，样式应写在父组件对应的html标签中。也不可以在slot标签上添加事件，而应在对应的父组件标签上填写事件。**

（1）父组件向子组件传递dom元素，标签元素

<body>
        <div id="app">
           <child>
               <p>11</p>
               <span>22</span>
           </child> 
        </div>
        <script>
            var child = {
                template: `<div>
                              <slot></slot>
                           </div>`,
            }
            var vm = new Vue({
                el: '#app',
                components: {
                    child 
                },
            })
        </script>

![20181115115414854.png][] ![20181115115434438.png][]

slot的作用就是： 子组件中的![20181115115537203.png][] ===  父组件中的![2018111511552539.png][]

并且：子组件中还可以写标签的，注意在slot逻辑之前还是在逻辑之后

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70][]

结果：

![20181115120052544.png][]

**（3）如果父组件中没有传入标签，那么，slot标签的innerText才会生效**

父组件中有标签元素，slot标签中的内容不生效

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1][]       ![20181115124821853.png][]

父组件中的没有标签元素，slot标签中的内容生效

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 2][]         ![20181115124932244.png][]

**（4）一个组件中多个插槽（具名插槽）**

<div id="app">
           <child>
                <div class="header" slot="header">header</div>
                <div class="footer" slot="footer">footer</div>
           </child> 
        </div>
        <script>
            var child = {
                template: `<div>
                              <slot name="header"></slot>
                              <div class="cont">hello</div>
                              <slot name="footer"></slot>
                           </div>`,
            }
            var vm = new Vue({
                el: '#app',
                components: {
                    child 
                },
            })
        </script>

结果：

![20181115145219266.png][]

注意：具名插槽也是有默认值的。在父组件没有传入该具名的标签时，内容就由插槽的默认值决定

**（5）作用域插槽**

**组件的复用程度更大的时候**

<div id="app">
           <child>
               <template slot-scope="items">
                   <li>{
       {items.item}}</li>
               </template>
           </child> 
        </div>
        <script>
            var child = {
                data: function(){
                    return {
                        list: [1,2,3,4]
                    }
                },
                template: `<div>
                              <ul>
                                <slot v-for="item of list" :item=item></slot>
                              </ul>
                           </div>`,
            }
            var vm = new Vue({
                el: '#app',
                components: {
                    child 
                },
            })
        </script>

![20181115151901761.png][]                          ![20181115151944810.png][]

**代码结构：**

**list的值传入到子组件list中，item就是list的每一项，所有的item都传入template标签的items中，那么就可以通过items.item获取list中的每一项。注意template中的slot-scope是必写的属性。**

**这样，父组件中li可以替换，那么数据展示出来的形式就由父组件决定，比如：li标签换为span标签**

**父组件将值传给了子组件，子组件中slot又将值传到了父组件的作用域插槽中**

结果：

![20181115152824749.png][]

![20181115152850639.png][]

二、实例

1. 项目中，实现了一个很奇妙的功能：

父组件：name值的传入

![20181130182352483.png][]

子组件：根据time值，加载不同的div

![20181130182411421.png][]

效果是：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 3][]

[20181115115414854.png]: https://img-blog.csdnimg.cn/20181115115414854.png
[20181115115434438.png]: /images/20220416/b833a30d74ae4cc7bcd8e88bd451c1a2.png
[20181115115537203.png]: https://img-blog.csdnimg.cn/20181115115537203.png
[2018111511552539.png]: /images/20220416/8d3516ecfe084502abc3fea6048b623b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70]: /images/20220416/83bab986137d42a8a3576fdc19fb0c1e.png
[20181115120052544.png]: /images/20220416/3b97d3214c774314b8ab1fa3bce1c5a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20181115124725148.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw,size_16,color_FFFFFF,t_70
[20181115124821853.png]: /images/20220416/6a577c27a2ed4407986fe5a566065362.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181115124922687.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw,size_16,color_FFFFFF,t_70
[20181115124932244.png]: /images/20220416/d8c2fd0617904e93b1c0249cceee078a.png
[20181115145219266.png]: /images/20220416/e0272002684a4dee9cf2ec17a0909867.png
[20181115151901761.png]: https://img-blog.csdnimg.cn/20181115151901761.png
[20181115151944810.png]: /images/20220416/f78761ba60674cf1aa01b110aacf6af2.png
[20181115152824749.png]: /images/20220416/362a44fddafd42418ec5f48c1ef5ae43.png
[20181115152850639.png]: /images/20220416/be2b8eddab644ae0a1c06915176cae72.png
[20181130182352483.png]: /images/20220416/00025764136147d5a2986cb8c6b641e5.png
[20181130182411421.png]: /images/20220416/7f3449a0d2ac46c3a177c7aab3fda4ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p5ejAwMDAwMDAw_size_16_color_FFFFFF_t_70 3]: /images/20220416/f42e240f8e2a46bfbd19b8c3d17606da.png