vue插槽详解-蒲公英云

vue插槽详解

野性酷女 2023-07-22 14:26 197阅读 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>

在这里插入图片描述
二具名插槽

具名插槽其实就是在父组件中添加一个 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>

在这里插入图片描述
三作用域插槽

父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
不过，我们可以在父组件中使用 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>