插槽和具名插槽的使用

最新推荐文章于 2023-06-22 21:26:04 发布

有思想的前端

最新推荐文章于 2023-06-22 21:26:04 发布

阅读量640

点赞数

文章标签： vue html js

本文链接：https://blog.csdn.net/weixin_46381442/article/details/109385059

版权

插槽和具名插槽的使用
首先我们先注册一个组件然后在#app内部使用

html：
<div id="app">
        <cpn></cpn>
        <br>
        <cpn>
            <button>按钮</button>
        </cpn>
        <br>
        <cpn>
            <input type="text" placeholder="请输入名字">
        </cpn>
        <br>
        <cpn></cpn>
    </div>
    <template id="cpn">
        <div>
            <h3>我是标题</h3>
            <p>我是内容</p>
            <slot>
                <!-- 这里的p标签时一个默认的标签，因为页面需要p标签比较多 -->
                <p>张益达</p>
            </slot>
        </div>
    </template>

js：
 const app = new Vue({
            el:"#app",
            data:{

            },
            components:{
                cpn:{
                    template:"#cpn"
                }
            }
        })

要注意，当我们使用插槽的时候在注册组件内部也就是template内部添加一个<slot></slot>这个标签

当我们页面需要多个重复内容的时候，我们可以在slot标签内部写一个默认的标签（就是你页面过多重复的标签）

在<cpn></cpn>默认就显示<slot></slot>标签里的内容

如果你想使用其他标签可以直接在<cpn></cpn>标签内部添加，可以直接覆盖<slot></slot>标签内部的标签

具名插槽的使用
其实具名插槽和普通的插槽并没有太大的差别，无非就是给注册组建中<slot></slot>标签添加一个name属性，在<cpn></cpn>标签内部更改的时候在添加标签内部添加一个name属性进行修改。

 <div id="app">
        <cpn>
            <span slot="left">返回</span>
            <span slot="content">标题</span>
            <span slot="right">详情</span>
        </cpn>
        <br>
        <cpn>
            <button>按钮</button>
        </cpn>
        <br>
        <cpn>
            <input type="text" placeholder="请输入名字">
        </cpn>
        <br>
        <cpn></cpn>
    </div>
    <template id="cpn">
        <div>
            <h3>我是标题</h3>
            <p>我是内容</p>
            <slot>
                <!-- 这里的p标签时一个默认的标签，因为页面需要p标签比较多 -->
                <p>张益达</p>
            </slot>
            <slot name="left">左边</slot>
            <slot name="content">中间</slot>
            <slot name="right">右边</slot>
        </div>
    </template>

这个时候页面原本左边、中间、右边就改成了返回、标题、详情
以上就是具名插槽的使用

以下是所有的代码和效果：

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <div id="app">
        <cpn>
            <span slot="left">返回</span>
            <span slot="content">标题</span>
            <span slot="right">详情</span>
        </cpn>
        <br>
        <cpn>
            <button>按钮</button>
        </cpn>
        <br>
        <cpn>
            <input type="text" placeholder="请输入名字">
        </cpn>
        <br>
        <cpn></cpn>
    </div>
    <template id="cpn">
        <div>
            <h3>我是标题</h3>
            <p>我是内容</p>
            <slot>
                <!-- 这里的p标签时一个默认的标签，因为页面需要p标签比较多 -->
                <p>张益达</p>
            </slot>
            <slot name="left">左边</slot>
            <slot name="content">中间</slot>
            <slot name="right">右边</slot>
        </div>
    </template>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            data:{

            },
            components:{
                cpn:{
                    template:"#cpn"
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
如有问题请及时联系，也好及时更改，谢谢！

有思想的前端

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
插槽和具名插槽的使用

插槽和具名插槽的使用首先我们先注册一个组件然后在#app内部使用html：<div id="app"> <cpn></cpn> <br> <cpn> <button>按钮</button> </cpn> <br> <cpn> <inpu
复制链接

扫一扫