vue slot插槽

Posted 人民有信仰国家有力量

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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插槽

Vue--插槽slot

vue插槽 Slots

vue插槽slot理解

Vue笔记:插槽(slot)

Vue插槽理解