Vue插槽的使用

最新推荐文章于 2023-05-22 11:14:08 发布

甜美河边的钓鱼人

最新推荐文章于 2023-05-22 11:14:08 发布

阅读量112

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/chenjianhuideyueding/article/details/107555283

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

写死的组件，不太灵活，slot插槽，可以动态地往组件里加标签模块：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot</title>
</head>
<body>
<div id="app">
    <!--不同的标签都可以扩展插入到组件里-->
    <my>
        <h2>从前从前，有个人爱你很久，但偏偏，雨渐渐，大到我看你不见</h2>
    </my>
    <h2>---------------------------------------------------</h2>
    <my>
        <h2>而我已经分不清，你是友情，还是错过的爱情</h2>
    </my>
</div>
<script src="../js/vue.js"></script>
<template id="my">
    <div>
        <h1>我躲在面具里，偷偷地在哭泣，因为看了不能说的秘密</h1>
        <slot></slot>
    </div>
</template>
<script>
    const app = new Vue({
        el: '#app',
        components: {
            my: {
                template: '#my'
            }
        }
    })
</script>
</body>
</html>

当多个占位，在不同界面展示替换不同slot时，可以使用具名slot

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>slot</title>
</head>
<body>
<div id="app">
    <!--具名标签，可以根据名字来定位嵌入标签，如果指定了名字，那么顺序跟组件里面定义的顺序一样-->
    <my>
        <h2 slot="first">从前从前，有个人爱你很久，但偏偏，雨渐渐，大到我看你不见</h2>
        <h2 slot="second">本来讨厌下雨的天空，只有有人说爱我</h2>
        <h2 slot="third">就是开不了口，让他知道</h2>
    </my>
    <h2>---------------------------------------------------</h2>
    <my>
        <!--不按照顺序显示，按照名字，匹配组件里的slot,然后按照组件里的slot的顺序展示-->
        <h2 slot="first">而我已经分不清，你是友情，还是错过的爱情</h2>
        <h2 slot="third">就是开不了口，让他知道</h2>
        <h2 slot="second">本来讨厌下雨的天空，只有有人说爱我</h2>
    </my>
</div>
<script src="../js/vue.js"></script>
<template id="my">
    <div>
        <h1>我躲在面具里，偷偷地在哭泣，因为看了不能说的秘密</h1>
        <slot name="first"></slot>
        <slot name="second"></slot>
        <slot name="third"></slot>
    </div>
</template>
<script>
    const app = new Vue({
        el: '#app',
        components: {
            my: {
                template: '#my'
            }
        }
    })
</script>
</body>
</html>

甜美河边的钓鱼人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue插槽的使用

写死的组件，不太灵活，slot插槽，可以动态地往组件里加标签模块：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>slot</title></head><body><div id="app">  <my&
复制链接

扫一扫