vue插槽详解

野性酷女 2023-07-22 14:26 73阅读 0赞

插槽分为以下三种

**1、默认插槽  
2、具名插槽  
3、作用域插槽**

**一 默认插槽**

<div id="app">
        <child-component>你好</child-component>
    </div>
    <script>
       Vue.component('child-component',{ 
            template:` <div> Hello,World! <slot></slot> </div> `
        })
        let vm = new Vue({ 
            el:'#app',
            data:{ 
            }
        })
    </script>

![在这里插入图片描述][2020040611032124.png]  
**二 具名插槽**

具名插槽其实就是在父组件中添加一个 slot=‘自定义名字’ 的属性， 然后在子组件中的 里面添加 name=‘自定义名字’ 即可； 如果父组件中有一部分没有添加 slot 属性，则此处就是默认的插槽，在子组件中的 ，直接就是使用的父组件的默认插槽部分；

<div id="app">
        <div class="father">
            <h3>这里是父组件</h3>
            <child>
                <span slot="demo1">菜单1</span>
                <span>菜单2</span>
                <span slot="demo3">菜单3</span>
            </child>
        </div>
    </div>
    <template id="child">
        <div class="child">
            <h3>这里是子组件</h3>
            <slot></slot>
            <slot name="demo3"><slot>
        </div>
    </template>
    <script>
        var vm = new Vue({ 
            el: '#app',
            data: { },
            components: { 
                child: { 
                    template: '#child'
                }
            }
        });
    </script>

![在这里插入图片描述][20200406111820286.png]  
**三 作用域插槽**

父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。  
不过，我们可以在父组件中使用 slot-scope 特性从子组件获取数据，  
前提是需要在子组件中使用 :data=data 先传递 data 的数据。

<div id="app">
        <div class="father">
            <h3>这里是父组件</h3>
            <child>
                <div slot-scope="user">
                    { { user.data}}
                </div>
            </child>
        </div>
    </div>
    <script>
        Vue.component('child', { 
            template:'' +
                '<div class="child">\n' +
                ' <h3>这里是子组件</h3>\n' +
                ' <slot :data="data"></slot>\n' +
                ' </div>',
            data: function () { 
                return { 
                    data: ['zhangsan', 'lisi', 'wanwu', 'zhaoliu', 'tianqi', 'xiaoba']
                }
            }
        });
        var vm = new Vue({ 
            el: '#app',
        });
    </script>

![在这里插入图片描述][20200406112502641.png]

[2020040611032124.png]: /images/20230528/902f5a9ebb4440b389f73f93e25c1674.png
[20200406111820286.png]: /images/20230528/14801c0e2d26469e955e5cc9da936a8e.png
[20200406112502641.png]: /images/20230528/26654de6a0744793b39412773ff43288.png