vue slot插槽

Posted 2021-09-16 人民有信仰国家有力量

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue slot插槽相关的知识，希望对你有一定的参考价值。

slot插槽就是子组件中的提供给父组件使用的一个占位符，用<slot></slot> 表示，父组件可以在这个占位符中填充任何模板代码，如 html、组件等，填充的内容会替换子组件的<slot></slot>标签。

普通插槽

具名插槽

具名插槽使用

具名插槽上

</div>

</template>

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .red {
            color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <class>
            <!-- 具名插槽使用 -->
            <template v-slot:top>
                <div class="red">
                    具名插槽上
                </div>
            </template>
            免费课程
            <template v-slot:bottom>
                <div class="red">
                    具名插槽下
                </div>
            </template>
        </class>
        <class> 付费课程</class>
        <class> 限时折扣</class>
    </div>

    <template id="login">
        <div>
            <header style="margin-top: 10px;">
                <!-- 插槽  占位符 -->
                <slot></slot>
            </header>
            <!-- 具名插槽定义名字 -->
            <slot name=\'top\'></slot>
            <div>课程列表</div>
            <slot name=\'bottom\'></slot>
            <footer>
                <!-- 插槽  占位符 -->
                <slot></slot>
            </footer>
        </div>
    </template>

    <script>
        // 全局定义
        Vue.component("class", {
            template: "#login",
        });

        const vm = new Vue({
            el: "#app",
            data: {},
            methods: {},
        });
    </script>
</body>

</html>

以上是关于vue slot插槽的主要内容，如果未能解决你的问题，请参考以下文章