一、插槽基本使用

<!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. k8s组件和网络插件挂掉，演示已有的pod是否正常运行

    环境 03 master ,05 06是node [root@mcwk8s03 mcwtest]# kubectl get nodes -o wide NAME STATUS ROLES AGE VE ...

  2. win10 chrome 百分浏览器 centbrowser 收藏夹栏字体突然变小

    win10 chrome 百分浏览器 centbrowser 收藏夹栏字体突然变小 解决方法: 在"开始" >"设置" >"轻松使用&qu ...

  3. CentOS 7- 配置阿里镜像源

    1.备份CentOS 7系统自带yum源配置文件/etc/yum.repos.d/CentOS-Base.repo命令: mv /etc/yum.repos.d/CentOS-Base.repo /e ...

  4. winform遍历控件的Controls.OfType<>方法

    页面TextBox控件较多时,可以使用类似的名字,方便遍历时整体的修改,可以使用Controls.OfType<TextBox>()获取所有文本框: 需要引用命名空间System.Linq ...

  5. Vue学习：3.V标签综合3

    接上一篇... V标签综合使用:记事本案例 功能: 在实现列表渲染和删除功能的基础上,增加了数据添加以及数据统计,同时要求底部统计和清空区域在事件数目为0时不显示. 思路: 整体架构分为三部分:头部使 ...

  6. [踩坑记录] Vue3 customRef 传入对象没有进入set方法

    问题描述 学习Vue3 Ref 相关 API 的时候,遇到了 customRef 这个 API,它可以让我们自定义 ref 的更新的过程 但是使用 customRef 有一个问题就是,如果你传入的是初 ...

  7. 判断日期是否为周六周日，BigDecimal比较大小

    判断日期是否为周六周日,BigDecimal比较大小 package com.example.core.mydemo.date; import java.math.BigDecimal; import ...

  8. 关于Lecture2建立一个Git远程仓库的补充

    Smiling & Weeping ---- 心之何如,有似万丈迷津, 遥亘千里. 其中并无舟子可渡人, 除了自渡,他人爱莫能助. Git 远程仓库(Github) Git 并不像 SVN 那 ...

  9. 行为型模式(Behavioer Pattern)

    行为型设计模式 行为型模式定义了系统中对象之间的交互与通信,研究系统在运行时对象之间的相互通信与协作,进一步明确对象的职责,包括对系统中较为复杂的流程的控制. 在软件系统运行时对象并不是孤立存在的,它 ...

  10. STM32 CubeMX 学习：05-串口

    --- title: mcu-stm32-cube-05-using-serial.md date: 2020-03-09 10:37:34 categories: tags: - stm32 - c ...