一、插槽基本使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--

    slot的使用目的是对组件中设置一个空白的自定义元素位置

    在实际Vue实例中使用组件时，每一个调用的组件在定义的位置中插入不同的元素

-->

<div id="aaa">

    <comp>

        <!-- 2、在使用中插入我们希望的东西 -->

        <button>这是我们插入的按钮</button>

    </comp>

    <comp>

        <p>这是我们插入的段落</p>

    </comp>

    <comp>

        <span>插入我们自定义的内容</span>

    </comp>

</div>

<template id="sss">

    <div>

        <h3>我是组件</h3>

        <p>我是内容</p>

        <slot></slot> <!-- 1、在组件的模板中定义插槽标签 -->

    </div>

</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">

    const v = new Vue({

        el : '#aaa',

        components : {

            comp : {

                template : '#sss'

            }

        }

    });

</script>

</body>

</html>

二、具名插槽的使用

具名插槽，意思就是插槽标签具备name属性，可以命名插槽：

要注意的是，不要和普通slot元素混用，造成插槽混乱

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <cpn>

        <span slot="right">替换name属性为right的插槽</span>

    </cpn> <!-- 如果插入的元素没有指定，默认替换掉没有name属性的 -->

    <hr>

    <cpn>

        <span slot="center">替换name属性为center中间的插槽</span> <!-- 或者指定具体名称进行插入 -->

    </cpn>

</div>

<template id="cpn">

    <div>

        <h3>组件</h3>

        <p>内容</p>

        <p>

            <!-- 具名插槽 slot标签具有名字属性  -->

            <slot  name="left"><span>左边</span></slot>

            <slot  name="center"><span>中间</span></slot>

            <slot  name="right"><span>右边</span></slot>

        </p>

    </div>

</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">

    const v = new Vue({

        el : '#app' ,

        components : {

            cpn : {

                template : '#cpn'

            }

        },

    });

</script>

</body>

</html>

三、编译作用域问题：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!-- 编译作用域 -->

<div id="app">

    <cpn v-show="isShow"></cpn> <!-- 3、判断组件是否显示  -->

</div>

<!-- 答案是true原因是因为 在实例容器元素中只会渲染实例的属性变量，只有在组件自己的实例中去调用自己的属性变量 -->

<template id="sss">

    <div>

        <h3>ssss</h3>

        <p>

            不显示的按钮

            <button v-show="isShow">不显示的按钮</button>

        </p>

    </div>

</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">

    const app = new Vue({

        el : '#app',

        data : {

            message : '你好',

            isShow : true /* 1、 在Vue实例中提供了一个属性isShow 值为true */

        },

        components : {

            cpn : {

                template: '#sss',

                data () {

                    return {

                        isShow : false /* 2、 在注册的组件实例中提供了一个属性isShow 值为false */

                    }

                },

            },

        },

    })

</script>

</body>

</html>

四、作用域插槽：

在父组件中替换插槽的标签元素，但是值内容由子组件提供

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="aaa">

<!--    <comp></comp>-->

<!--    <comp></comp>-->

<!--    <comp></comp>-->

    <comp>

        <template slot-scope="slot">

            <!--<span v-for="item in slot.data">{{item}} | </span>-->

            <!-- 解决拼接符号的问题 -->  <span>{{slot.data.join(' | ')}}</span>

        </template> <!-- template 用data获取 也可以把绑定的属性用其他命名 -->

    </comp>

</div>

<!--<template id="sss">-->

<!--    <div>-->

<!--        <ul>-->

<!--            <li v-for="pl in programLanguages">{{pl}}</li>-->

<!--        </ul>-->

<!--    </div>-->

<!--</template>-->

<template id="sss">

    <div>

        <slot :data="programLanguages"> <!-- 把一个data属性绑定到这个pl变量 -->

            <ul>

                <li v-for="pl in programLanguages">{{pl}}</li>

            </ul>

        </slot>

    </div>

</template>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script type="text/javascript">

    const aaa = new Vue({

        el : '#aaa',

        components : {

            comp : {

                template : '#sss',

                data () {

                    return {

                        programLanguages : [

                            'JavaScript',

                            'C/C++',

                            'ObjectiveC',

                            'VisualBasic',

                            'Java',

                            'GoLang',

                            'Swift',

                            'Python',

                            'Ruby',

                            'Rust',

                            'PHP'

                        ]

                    }

                }

            }

        }

    })

</script>

</body>

</html>

【Vue】Re07 插槽Slot的更多相关文章

  1. Vue.js插槽slot和作用域插槽slot-scope学习小结

    一般来说,在Vue项目中使用父子组建时,都是把通用的HTML结构提取出来写成一个子组件,需要动态展示的数据用过prop属性传递,不过有时候我们可能想给子组件传递一个HTML代码,这个时候用prop不太 ...

  2. Vue中插槽slot的使用

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题在这里就点出来了,是显示不显示和怎样显示. 由于插槽是一块模板,所 ...

  3. vue的插槽slot

    插槽是写在子组件上,用啦留给父级添加内容的位置接口: 1. 父级里的 <template :is='子标签名'>父插入内容</template>标签,里的内容       sl ...

  4. vue 中的slot属性(插槽)的使用

    总结如下: VUE中关于插槽的文档说明很短,语言又写的很凝练,再加上其和方法,数据,计算机等常用选项在使用频率,使用先后上的差别,这就有可能造成初次接触插槽的开发者容易产生“算了吧,回头再学,反正已经 ...

  5. vue 插槽slot

    本文是对官网内容的整理 https://cn.vuejs.org/v2/guide/components.html#编译作用域 在使用组件时,我们常常要像这样组合它们: <app> < ...

  6. vue中的slot（插槽）

    vue中的插槽----slot 什么是插槽? 插槽(Slot)是Vue提出来的一个概念,正如名字一样,插槽用于决定将所携带的内容,插入到指定的某个位置,从而使模板分块,具有模块化的特质和更大的重用性. ...

  7. [Vue]组件——插槽：slot（匿名插槽，具名插槽）与slot-scope（作用域插槽）

    1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...

  8. Vue插槽 slot

    1. 什么是插槽 插槽slot 是往父组件中插入额外内容,实现组件的复用,一个插槽插入到一个对应的标签中 2. 实例: 一个组件中不允许有两个匿名插槽 </head> <body&g ...

  9. 在vue中使用插槽 slot

    插槽(slot)这个概念非常重要 插槽的使用场景1:在子组件里面显示父组件的dom <div id='root'> <child content = '<p>Dell&l ...

  10. vue使用插槽分发内容slot的用法

    将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...

随机推荐

  1. Nodejs中间件 中间件分类和自定义中间件

    中间件 中间件理解 中间件可以理解为业务流程的中间处理环节.如生活中吃一般炒青菜,大约分为如下几步骤 express中当一个请求到达的服务器之后,可以在给客户响应之前连续调用多个中间件,来对本次请求和 ...

  2. 让Easysearch运行在Kylin V10 (Lance)-aarch64上

    简介 本文主要介绍在国产操作系统 Kylin V10 (Lance)-aarch64 上安装单机版 Easysearch/Console/Agent/Gateway/Loadgen 系统配置 在安装之 ...

  3. C#.NET Winform使用线程承载WCF （硬编码配置）

    winform同步承载WCF时,遇到大量请求,可能会阻塞UI线程.这时就需要开个线程来承载WCF. 1.硬编码形式创建WCF服务,WCFServer类: using CommonUtils; usin ...

  4. C#字符串截取分割方法

    字符串操作:分割 Split.连接数组 Join.拼接 Format.截取 Substring.替换 Replace.左填充 PadLeft.右填充 PadRight.删除 Remove 1 //分割 ...

  5. raksmart服务器部署SSL报错：ERR_CERT_COMMON_NAME_INVALID

    背景:raksmart服务器 下篇 部署项目 SSL报错:ERR_CERT_COMMON_NAME_INVALID 安装certbot sudo apt update sudo apt install ...

  6. mybatis insert foreach批量添加

    mybatis insert foreach批量添加 int insertSelectiveBatch(List<ImageDetailEntity> myList); //写法1 < ...

  7. onreadystatechange 属性

    onreadystatechange 属性是 XMLHttpRequest 对象的一个事件处理器,用于在 XMLHttpRequest 对象的 readyState 属性发生变化时触发.这个属性通常用 ...

  8. 『vulnhub系列』EVILBOX-ONE

    『vulnhub系列』EVILBOX-ONE 下载地址: https://www.vulnhub.com/entry/evilbox-one,736/ 信息搜集: 使用nmap探测内网存活主机,发现开 ...

  9. 【论文阅读】Optimization-Based Collision Avoidance

    前言与参考 论文地址:https://ieeexplore.ieee.org/document/9062306 文章是2018年5月提出的,但是到了2020年才发表到ACC 所以时间轴上写的是2021 ...

  10. 卷积神经网络中nn.Conv2d()和nn.MaxPool2d()以及卷积神经网络实现minist数据集分类

    卷积神经网络中nn.Conv2d()和nn.MaxPool2d() 卷积神经网络之Pythorch实现: nn.Conv2d()就是PyTorch中的卷积模块 参数列表 参数 作用 in_channe ...