vue组件中插槽slot

最新推荐文章于 2024-05-28 17:25:55 发布

叨唠

最新推荐文章于 2024-05-28 17:25:55 发布

阅读量367

点赞数

分类专栏： Vue 文章标签： vue 插槽slot

本文链接：https://blog.csdn.net/zyz00000000/article/details/84101834

版权

Vue 专栏收录该内容

58 篇文章 1 订阅

订阅专栏

注意：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>

slot的作用就是：子组件中的 === 父组件中的

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

结果：

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

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

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

（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>

结果：

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

（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>

代码结构：

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

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

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

结果：

二、实例

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

父组件：name值的传入

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

效果是：

叨唠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue组件中插槽slot

注意：slot标签中样式不生效，样式应写在父组件对应的html标签中。也不可以在slot标签上添加事件，而应在对应的父组件标签上填写事件。（1）父组件向子组件传递dom元素，标签元素<body> <div id="app"> <child> <p>11</p> &...
复制链接

扫一扫