Vue入门-插槽

た入场券 2021-09-15 14:26 318阅读 0赞

**slot插槽**

Vue 实现了一套内容分发的 API，将 <slot> 元素作为承载分发内容的出口。使用slot插槽,可以更好的实现组件复用。

**具名插槽**

可以将内容进行细分，指定内容放置的插槽位置。

**作用域插槽**

可以让内容使用插槽中绑定的数据，而不是父级中的变量。

**示例代码（参照上面的解释及代码注释理解代码）**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>插槽</title>
        <style>
            #app {
                width: 500px;
                margin: auto;
                border: 1px solid blue;
                border-radius: 10px;
            }
    
            #wrapper1,
            #wrapper2,
            #wrapper3 {
                width: 400px;
                margin: 20px auto;
                border: 1px solid red;
                border-radius: 8px;
                padding-left: 10px;
            }
        </style>
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    </head>
    
    <body>
        <div id="app">
            <child1>
                
                <h2>今日头条</h2>
                <p>详情{
       {msg}}</p>
                <p>新闻评论</p>
            </child1>
            <child2>
                <h1 slot="header">这是一个h1标题</h1>
                <h2 slot="main">这是一个h2标题</h2>
                
                <p>这是一个标签,没有指定slot</p>
                <footer slot="footer">这是一个h5新增的footer标签</footer>
            </child2>
            <child3>
                <template slot-scope="prop">
                    <p>备注：没有slot-scope,那么该范围的变量都是父级作用域的,有slot-scope,那么相当于使用的是给slot中绑定的变量</p>
                    <p>显示插槽中的text:{
       {prop.text}}</p>
                    <p>显示插槽中的num:{
       {prop.num}}</p>
                </template>
            </child3>
        </div>
    </body>
    <template id="child1">
        <div id="wrapper1">
            <h1>这是子组件1</h1>
            
            <slot>当你不写内容时,会显示</slot>
        </div>
    </template>
    
    <template id="child2">
        <div id="wrapper2">
            <slot name="header"></slot>
            <slot name="main"></slot>
            <slot></slot>
            <slot name="footer"></slot>
        </div>
    </template>
    
    <template id="child3">
        <div id="wrapper3">
            <slot :text="szStr" :num="nNum"></slot>
        </div>
    </template>
    
    </html>
    
    <script>
        /*
         * 使用slot插槽,可以更好的实现组件复用
         */
    
        let child1 = {
            template: '#child1'
        };
        let child2 = {
            template: '#child2'
        };
        let child3 = {
            template: '#child3',
            data() {
                return {
                    szStr: '幸福',
                    nNum: 137
                }
            }
        };
    
        new Vue({
            el: '#app',
            components: {
                child1,
                child2,
                child3
            },
            data: {
                msg: '+摘要'
            }
        })
    </script>