vue-例5-12具名slot插槽.html

最新推荐文章于 2024-08-12 09:24:46 发布

虾米大王

最新推荐文章于 2024-08-12 09:24:46 发布

阅读量53

点赞数

分类专栏： Vue 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/modern358/article/details/129968707

版权

Vue 专栏收录该内容

661 篇文章 4 订阅

订阅专栏

文章介绍了具名slot插槽在Vue.js组件中的使用，通过示例展示了如何通过name属性配置slot来接收和组织父组件的内容。具名slot允许更精细的内容分发，可以在模板中定义多个slot，并匹配具有相应slot属性的子元素。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>具名slot插槽</title>
</head>
<body>
    <h1>具名slot插槽</h1>
    <p>slot元素可以用一个特殊的属性name来配置如何接收父组件的分发内容。</p>
    <p>多个slot可以有不同的名字。具名slot将匹配内容片段中有对应slot特性的元素</p>
    <div id="app">
        <my-component>
            <h1 slot="header">页面标题</h1>
            <p>主要内容的一个段落</p>
            <p>另一个主要段落</p>
            <div slot="footer">
                <address>这里有一些联系信息</address>
            </div>
        </my-component>
    </div>

    <script src="../js/vue.js"></script>

    <script>
        Vue.component('my-component',{
            template:`
<div>
    <header>
        <slot name="header"></slot>
    </header>
    <main>
        <slot></slot>
    </main>
    <footer>
        <slot name="footer"></slot>
    </footer>
</div>
            `
        });

        let vm = new Vue({
            el:'#app'
        });
    </script>
</body>
</html>