1.背景

2.slot简单使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script src="../js/vue.js"></script>

</head>

<body>

<h2>插槽slot简单使用</h2>

<pre>

1.定义:通俗的来说就是html中的变量,你可以理解为html替换,他要实现的功能非常类型之前我们使用jquery的 $("#id").html('要替换的内容')

2.官方的定义大家自己百度

    需求:

    1. 定义一个组件;

    2.组件内部的内容可以根据使用者替换

</pre>

<hr>

<h2>案例如下:</h2>

<div id="app">

    <c-child1></c-child1>

    -------------------------

    <c-child1>

        <div>父类替换你的值</div>

    </c-child1>

</div>

<!--子组件模板1-->

<template id="child1id">

    <div>

        我是一个子组件

        <div>

            <slot>这是我的默认内容,使用者可以替换</slot>

        </div>

    </div>

</template>

<script>

    let app = new Vue({

        el: '#app',

        // 组件

        components: {

            'c-child1': {

                template: '#child1id',

            }

        }

    })

</script>

</body>

</html>

3.具名插槽

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script src="../js/vue.js"></script>

</head>

<body>

<h2>插槽slot-具名插槽</h2>

<pre>

1.当多个插槽时,我们替换的内容到底替换那个插槽呢,这时候我们就需要给插槽去一个名字

2.可以利用slot 元素的一个特殊的特性：name来定义具名插槽

    需求:

    1. 定义一个组件;

    2. 组件内3个插槽,分别为网页的头部、主体、脚部

</pre>

<hr>

<h2>案例如下:</h2>

<div id="app">

    <c-child1>

        <div slot="header">填充头部</div>

        <div slot="body">填充主体</div>

        <div slot="footer">填充脚部</div>

    </c-child1>

</div>

<!--子组件模板1-->

<template id="child1id">

    <div>

        <div>

            <slot name="header">头部</slot>

            <slot name="body">主体</slot>

            <slot name="footer">脚部</slot>

        </div>

    </div>

</template>

<script>

    let app = new Vue({

        el: '#app',

        // 组件

        components: {

            'c-child1': {

                template: '#child1id',

            }

        }

    })

</script>

</body>

</html>

4.父组件控制插槽中的数据显示方式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

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

    <script src="../js/vue.js"></script>

</head>

<body>

<h2>插槽-实现子组件提供数据-父组件提供展示样式</h2>

<pre>

    需求:

    1. 提供一个子组件含插槽和一组数据;

    2. 父组件控制数据在插槽中的显示方式;

    备注:

    实际生产中子组件获取到数据后,可能要在不同环境的父组件中做不同的展示

</pre>

<hr>

<h2>案例如下:</h2>

<div id="app">

    展示方式一:

    <c-child1>

        <!--  slotProps2 可以自定义-->

        <template slot-scope="slotProps2">

            <ul>

                <!-- slotProps2.data 取出插槽绑定在上面的data-->

                <li v-for="item in slotProps2.data">{{item}}</li>

            </ul>

        </template>

    </c-child1>

    -----------------------

    <br>

    展示方式二:

    <c-child1>

        <template slot-scope="slotProps2">

            <ul>

                <li v-for="(item,index) in slotProps2.data">{{index+1}}-{{item}}</li>

            </ul>

        </template>

    </c-child1>

</div>

<!--子组件模板1-->

<template id="child1id">

    <div>

        <!-- 这里的data不乱取名字,只能是data-->

        <slot :data="orderList"></slot>

    </div>

</template>

<script>

    let app = new Vue({

        el: '#app',

        // 组件

        components: {

            'c-child1': {

                template: '#child1id',

                data() {

                    return {

                        orderList: ['书籍', '水果', '键盘', '水杯']

                    }

                }

            }

        }

    })

</script>

</body>

</html>

完美!

vue之插槽-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. kooder安装及本地搜索git仓库代码

    kooder安装及本地搜索git仓库代码 需求背景:如果需要从Git代码仓库查询某个配置项做批量的更新替换,如果一个一个找不合适且容易遗漏,需要借助第三方工具来模糊查询来实现. 1.下载及文档地址ht ...

  2. linux下后台运行程序

    文章目录 背景 nohup命令 setsid命令 pm2 背景 后台运行程序的时候,如果退出当前的终端(session),你运行的所有程序(包括后台程序),都将被关闭. 原因是:你运行的程序都是你的终 ...

  3. 17-Docker镜像和容器操作

    镜像 拉取镜像(下载镜像) 镜像是层次型的,拉取的时候会按照各层分别拉取. 每一个镜像都有自己的散列值,用来唯一标记一层镜像,可以用来判断本地是否已经拉取过此镜像层,如果已经拉取,则直接使用. doc ...

  4. Java面试知识点（六）hashmap深度理解

    1.hashmap 的数据结构 要知道 hashmap 是什么,首先要搞清楚它的数据结构,在 java 编程语言中,最基本的结构就是两种,一个是数组,另外一个是模拟指针(引用),所有的数据结构都可以用 ...

  5. libevent之evbuffer

    目录 Evbuffers:缓冲 IO 的实用程序功能 简介 创建或释放 evbuffer Evbuffers 和线程安全 检查 evbuffer 向 evbuffer 添加数据:基础知识 将数据从一个 ...

  6. Linux 使用 Swap分区

    Linux 使用 Swap分区 背景 买的云服务器在使用的时候,资源经常不够,因此需要使用swap分区. Swap分区在系统的物理内存不够用的时候,把硬盘内存中的一部分空间释放出来,以供当前运行的程序 ...

  7. Libgdx游戏开发(6)——游戏暂停

    原文: Libgdx游戏开发(6)--游戏暂停-Stars-One的杂货小窝 暂停也是一个游戏的必要功能了,本文研究了Libgdx实现游戏暂停 例子以桌面端游戏实现讲解为主,至于移动端,可能之后会进行 ...

  8. 脚本与数据的解耦 + Page Object模型

    标签(空格分隔): 脚本与数据的解耦 + Page Object模型 测试脚本和数据的解耦 你现在已经掌握了一些基本的 GUI 自动化测试用例的实现方法,是不是正摩拳擦掌准备批量开发 GUI 自动化脚 ...

  9. vmware安装配置openwrt

    前言 OpenWrt是一个轻量的嵌入式linux系统,功能十分强大. 现在将我在vmware上安装OpenWrt的过程简单记录下来,以备后续参考. 环境准备 vmware软件 已经安装好的一个vmwa ...

  10. [oeasy]python0029_放入系统路径_PATH_chmod_程序路径_执行原理

    ​ 放入路径 回忆上次内容 上次总算可以把 sleep.py 直接执行了 sleep.py文件头部要声明好打开方式 #!/usr/bin/python3 用的是 python3 解释 sleep.py ...