vue slot插槽

2021/9/16 23:04:47

编程Tag： vue 组件 slot 插槽具名 RED 课程

本文主要是介绍vue slot插槽，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

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

普通插槽

<slot></slot> 具名插槽 <slot name='top'></slot> 具名插槽使用 <template v-slot:top> <div class="red"> 具名插槽上 </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插槽的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

vue slot插槽

相关编程文章