Vue 插槽

Vue 插槽

Vue 的插槽其实不是很难 , 只要小伙伴们将下面的知识学会 , 相信你可以灵活掌握它 ❤

如果文档中有些内容你不懂的话 , 也可以留言给我 , 只要是我会的 , 必定倾囊相授 ❤

1. 插槽一定是使用在子组件中的

2 插槽的作用 : 就是将父组件中的子组件模板数据拿到然后显示在页面

     案例一

// 这是new Vue的实例
<div id="app">

    <h1>这是父组件</h1>
    // 存放在父组件中的子组件模板
    <child>
        <div>菜单一</div>
        <div>菜单二</div>
        <div>菜单三</div>
    </child>
    
</div>

//  使用子组件
<template id="child">

    // 只能存在一个根路径
    <div>
        <h2>这是子组件</h2>
        //  slot是内置的组件 , 只有添加slot才能在页面看到父组件中child标签中的数据
        <slot></slot>
    </div>
    
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
	// 创建child子组件
    let child = {
    	// 使用# id名进行关联
        template:"#child"
    }

	// Vue的实例
    let vm = new Vue({
        el:"#app",
        data:{

        },
        // 注册组件
        components:{
            child
        }
    })
</script>

不加 ( slot ) 的页面 :

加 ( slot ) 渲染到页面的结果 :

具名插槽

1 . 具名插槽就是在父组件中的子组件标签上添加行间属性 ( slot ) , 并且在子组件中的 ( slot ) 组件上加行间属性 name , 属性值和父组件中的 ( slot ) 属性值进行匹配 , 按照顺序显示对应的模板数据

2 . 如果父组件中一部分子组件没有添加行间属性 ( slot ) , 这一部分子组件就是父组件的默认插槽 , 那么子组件中的 ( slot ) 就会直接使用父组件中的默认插槽部分

	案例二

<div id="app">
    <h1>这是父组件</h1>
    <child>
    	// 在此添加行间属性 slot
        <div slot="first">菜单一</div>
        <div>菜单二</div>
        <div slot="third">菜单三</div>
    </child>
</div>
<template id="child">
    <div>
        <h2>这是子组件</h2>
        //  如果slot没有name属性，那么会默认把父组件中没有slot属性的都显示出来
        <slot></slot>
        <slot name="first"></slot>
    </div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let child = {
        template:"#child"
    }
    let vm = new Vue({
        el:"#app",
        data:{

        },
        components:{
            child
        }
    })
</script>

具名插槽 不加 name 属性的结果 :

具名插槽 加 name 属性的结果 :

默认的插槽会在第一位置显示
如果你想要打乱顺序 , 那么可以参照下面的方法

<div id="app">
    <h1>这是父组件</h1>
    <child>
        <div slot="first">菜单一</div>
        <div>菜单二</div>
        <div slot="third">菜单三</div>
        // 你也可以给同一个名字添加不同的东西
        <div slot="first">菜单四</div>
    </child>
</div>
<template id="child">
    <div>
        <h2>这是子组件</h2>
        <slot></slot>
        // 你可以随意调换顺序 , 使它们以你想要的方式呈现在页面中
        <slot name="third"></slot>
        <slot name="first"></slot>
    </div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let child = {
        template: "#child"
    }
    let vm = new Vue({
        el: "#app",
        data: {},
        components: {
            child
        }
    })
</script>

效果如下 :

作用域插槽

1 . 父组件中的数据都会在父级作用域中进行编译 , 子组件中的数据都会在子级作用域中进行编译

2 . 作用域插槽 : 解决了父组件可以调用子组件中的数据

3 . 首先 , 先在子组件中的 ( slot ) 组件上添加 :user="user" ( 前者与后者的名字须相同 ) 用来传递数据 ; 其次 , 我们要在父组件中使用 slot-scope="自定义名字" ( 此处自定义的名字须与小胡子语法中的 属性名.属性值 的属性名保持一致 ) , 这样才能使父组件可以得到子组件的数据

<div id="app">
    <child>
        <!--slot-scope:的属性是自定义-->
        <div slot-scope="use">
            {{use.user}}
        </div>
    </child>

</div>
<template id="child">
    <div>
        <h3>这是子组件</h3>
        // slot的传递数据必须是属性名和属性值必须相同的
        <slot :user="user"></slot>
    </div>
</template>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
    let child = {
        template:"#child",
        data(){
            return {user:["你好","我好","大家好"]}
        }
    };
    let vm = new Vue({
        el:"#app",
        data:{

        },
        components:{
            child
        }
    });
</script>

作用域插槽 渲染到页面的效果 :