vue-插槽分发内容

最新推荐文章于 2024-01-05 00:13:56 发布

shuaijie0518

最新推荐文章于 2024-01-05 00:13:56 发布

阅读量141

点赞数

分类专栏：基础前端文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/taoqidexiaojie/article/details/108884607

版权

基础前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

写文章之前呢。我想扯点杂事。今天是2020年9月30日下午两点半左右，距离我下班还有三个小时。明天就是国庆节了，你们会看大阅兵嘛？反正我会每年都看。看我们中国人的将领是多么的气宇轩昂。每次看的时候我的鸡皮疙瘩都一直往外冒。今年我也要准时收看。好了，现在正式学习一下把。
我们在定义多个插槽时。我们可以使用name属性进行区分的。如果没有name属性。则就会放入到默认的插槽中，而如果name没有匹配的，则内容就不显示。
上代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插槽</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <slot-test>
        <p>使用插槽分发内容</p>
        <h1 slot="header">插槽测试！</h1>
        <p>在组件中，没有指定插槽名称的元素将被置于默认插槽中</p>
        <p slot="none">指定到不存在的插槽中的内容将不会被显示</p>
    </slot-test>
</div>
<script type="text/javascript">
    let SlotTest = {
        template:'<div>'+'<slot name="header">相当于占位元素，因此这些文字也不会被渲染</slot>'
        +'<slot></slot>'//这个就是默认的插槽
        +'</div>'
    }
    let vm = new Vue({
        el:'#app',
        components:{SlotTest}
    })
</script>
</body>
</html>

上图片：
在这里插入图片描述通过上边的代码，我们就可以为Slot Test组件添加header插槽和默认插槽了。并且组件中将DOM分发到不同的插槽中。
Vue还提供了作用域插槽slot-scope（在Vue 2.5.0以下版本为scope，只可用于template元素）。我们可以使用slot-scope获取子组件回传的数据，用来在父组件中执行多态的渲染或相应。