一、插槽基本使用

<!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. 程序员面试金典-面试题 16.20. T9键盘

    题目: 在老式手机上,用户通过数字键盘输入,手机将提供与这些数字相匹配的单词列表.每个数字映射到0至4个字母.给定一个数字序列,实现一个算法来返回匹配单词的列表.你会得到一张含有有效单词的列表.映射如 ...

  2. linux Centos8系统，防火墙配置常用命令，systemctl 和firewall

    本文环境:Linux系统CentOS 8.2 64bit CentOS 7版本及以上版本较centos 6有较大改动,例如:采用systemctl命令来开启service,它是服务管理中主要的工具,融 ...

  3. DP Record

    从 2024/5/4 往后开始记录捏. T1. 给你一棵树,定义一个集合的权值为 \(\dfrac{\sum_{x\in S}V_x}{\sum_{x\in S}C_x}\).若一个点 \(\in S ...

  4. 搭建第一个web项目

    实现使用: 1.创建一个普通java文件 2.Java文件的类名实现HttpServlet 3.重写service方法 4.在WEB-INF下的web.xml中添加请求与servlet类的映射关系 定 ...

  5. 《编译原理》阅读笔记：p18

    <编译原理>学习第 3 天,p18总结,总计 14页. 一.技术总结 1.assembler (1)计算机结构 要想学习汇编的时候更好的理解,要先了解计算机的结构,以下是本人学习汇编时总结 ...

  6. post基础错误注入

    Burpsuite抓取HTTP请求 Burpsuite是一款Web安全测试的利器,集成了几乎Web安全测试中所有需要用到的功能. 运行前提: 需要安装Java https://www.java.com ...

  7. Power BI进阶秘籍，干货满满！如何将度量值转化为切片器（动态切换分析指标），实操指南来了！

    Power BI进阶秘籍,干货满满!如何将度量值转化为切片器(动态切换分析指标),实操指南来了!   想要在Power BI中让度量值也能像维度一样灵活筛选?没问题,这里就为你揭秘如何将度量值转化为切 ...

  8. 使用VS Code 学习算法(第四版)

    最近在学习算法(第四版),书中一直在使用命令行来执行Java程序,而使用Eclipse时,很难使用命令行,或者说我根本就不会用,于是就想研究一下使用VS Code来编写代码,使用命令行来执行程序.看了 ...

  9. Pandas中的常用函数

    1. map.apply.applymap 参考:Pandas教程 | 数据处理三板斧--map.apply.applymap详解 在日常的数据处理中,经常会对一个DataFrame进行逐行.逐列和逐 ...

  10. null 和 undefined 的区别？

    null 表示一个对象被定义了,值为"空值":undefined 表示不存在这个值.(1)变量被声明了,但没有赋值时,就等于undefined. (2) 调用函数时,应该提供的参数 ...