Vue入门-插槽

最新推荐文章于 2024-11-19 17:09:04 发布

转载最新推荐文章于 2024-11-19 17:09:04 发布 · 306 阅读

文章标签：

#插槽

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>
            <!--注意:要使用父级作用域中的变量,比如msg-->
            <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>当你不写内容时,会显示</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>