一、插槽基本使用

<!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. css摩天轮

    <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8 ...

  2. 【二分答案】P2390 地标访问

    \(\color{black}\text{P2390 地标访问 (传送门)}\) 学过区间 DP 的,看到这题的第一反应都是:访问的地标一定是一个区间,并且在不断扩大,区间 DP!可看到数据范围,又瞬 ...

  3. k8s搭建安装 Harbor 私有镜像仓库（本地仓库，内网仓库）

    主要参考 https://www.cnblogs.com/wangzy-Zj/p/14011228.html 额外: 1.如果 harbor.yml中的域名和openssl 生成的不一致,你改了hos ...

  4. Visual Studio 2022 community 社区版本离线安装

    下载好 vs_community__115739266.1625310894.exe 的,重命名为:vs_community2022.exe 命令: E:\vs_community2022.exe - ...

  5. 在线Base64转文件、文件转Base64工具

    在线Base64转换神器,一键实现Base64编码与文件互转!支持图片.文档等各类文件,快速准确,安全无服务器存储.拖拽上传,轻松编码解码,提升开发效率.跨平台兼容,移动端友好,让数据转换再无障碍. ...

  6. redis zset 延迟合并任务处理

    redis zset 延迟合并任务处理 @Autowired public RedisTemplate redisTemplate; ##1.发送端:在接口中收集任务ID,累计时间段之后,合并处理. ...

  7. [笔记]Git常用命令大全

    Tips:当你看到这个提示的时候,说明当前的文章是由原emlog博客系统搬迁至此的,文章发布时间已过于久远,编排和内容不一定完整,还请谅解` [笔记]Git常用命令大全 日期:2018-6-16 阿珏 ...

  8. 简单测下C++20 vector array lambda 的常数

    某天打了一下 CF,遇到了一道 https://codeforces.com/contest/1806/problem/E 这里需要卡常. 于是在 C++20(64) 下测出来了一些神奇的结果. 结果 ...

  9. python重拾基础第一天

    本节内容 Python介绍 发展史 Python 2 or 3? 安装 Hello World程序 变量 用户输入 模块初识 .pyc是个什么鬼? 数据类型初识 数据运算 表达式if ...else语 ...

  10. HBase 中的 JVM 与 GC

    HBase中JVM基本配置 在JVM中,默认情况下会设置minimum heap size 为 1/64 可用物理内存,并为maximum heap size设置 1/4 的物理可用内存(不过在Jav ...