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>

 

posted @ 2021-09-16 22:52  从入门到入土  阅读(127)  评论(0)    收藏  举报