vue组件中插槽slot

父组件向子组件传递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标签

结果：

猜你喜欢