Vue中插槽指令菜鸟指南_指令零基础入门

意义就是在组件里留着差值方便后续组件内容新增而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量示例 //4.创建个组件 //根据插槽的名称创建插槽//插槽里面的内容

<

Vue中插槽指令菜鸟指南

意义

就是在组件里留着差值方便后续组件内容新增

Vue中插槽指令菜鸟指南_指令零基础入门

而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量

示例

<div id="app">
    <msg-tag>   //4.创建个组件
        <template v-slot:插槽的名称>   //根据插槽的名称创建插槽
            //插槽里面的内容
        </template>
    </msg-tag>
</div>
<script src="vue.js"></script>
<script>
    //1.创建组件
    let msgTag = {
        template: `
        <li>
            <slot name="插槽的名称"></slot> //3.设置插槽的内容
            <span>1111111</span>
        </li>
        `,
    };
    new Vue({
        el: '#app',
        components: {
            msgTag //2.注册组件
        }
    })
</script>

几种插槽特殊情况

情况一:组件里没有设置插件名称,页面中插槽中写了插槽名称 结果页面中插槽不会被渲染

情况二:组件里有设置插件名称,页面中插槽中没写了插槽名称 结果页面中插槽不会被渲染

情况三:组件里没有设置插件名称,页面中插槽中没写了插槽名称 结果页面中插槽会被渲染

情况四:组件里只写了一个插槽,页面中写了多个插槽中没写了插槽名称 结果页面中插槽会被渲染而且依次排列显示插槽的位置

情况五:组件里只写了N个插槽,页面中写了n个插槽中没写了插槽名称 结果页面中插槽会被渲染而且依次排列显示插槽的位置,且每个插槽位置都显示n个,前提名字要一一对应

海计划公众号
(0)
上一篇 2020/03/24 05:42
下一篇 2020/03/24 05:42

您可能感兴趣的内容

  • json与jsonp的使用小白常识_json使用帮助

    1.json与jsonp的引入在ajax中 JSON用来解决数据交换问题,而JSONP来实现跨域。备注:跨域也可以通过服务器端代理来解决;理解:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。2.JSON:是一种基于文本的数据交换方式,或者叫做数据描述格式,是否该选用它首先肯定要关注它所拥有的优点。 J

    2020/03/22
  • Js中的命名空间(namespace) 小白基础_js知识零基础入门

    全局变量应该由有系统范围相关性的对象们保留,并且它们的命名应该避免含糊并尽量减少命名冲突的风险。在实践中,这意味着你应该避免创建全局对象,除非它们是绝对必须的。不过,恩,这些你早都知道了……所以你对此是怎么做的?传统方法告诉我们,最好的消除全局策略是创建少数作为潜在模块和子系统的实际命名空间的全局对象。我将探索几种有关命名空间的方式,并以我基于 James

    2020/04/03
  • relax小白基础_基于 React 和 Node.js 的下一代 CMS 系统

    relax小白基础 GitHub:https://github.com/relax/relax 简介描述:基于 React 和 Node.js 的下一代 CMS 系统 Relax是…

    2020/03/06
  • Superset基础入门_一款Airbnb开源的数据可视化工具

    Superset基础入门 官方网址:https://github.com/apache/incubator-superset GitHub:https://github.com/a…

    2020/03/06
  • 微信小程序前端样式WXSS书写指南教程_wxss攻略教程

    一. WXSS的简单介绍WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。与 CSS 相比,WXSS 扩展的特性有:尺寸单位样式导入二. 尺寸单位rpx(responsive pixel): 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像

    2020/03/24
  • JS基础语法:continue关键字指南教程_关键字入门教程

    continue: 在循环中如果遇到continue关键字,直接开始下一次循环如下:continue在计数器之前,会一直循环,浏览器会崩溃,我的就崩溃了var i = 0;
    while (i < 10) {console.log("哈哈");continue;i++;
    }练习1: 求100-200之间所有的奇数的和(用continue)var sum = 0

    2020/03/23
  • fine-uploader入门基础知识_一个采用Ajax技术实现的文件上传组件

    fine-uploader入门基础知识 官方网址:https://fineuploader.com GitHub:https://github.com/FineUploader/f…

    2020/03/06
  • 浏览器访问一个网站所经历的步骤入门基础教程_浏览器小白攻略

    1、Chrome搜索自身的DNS缓存2、搜索操作系统自身的DNS缓存(浏览器没有找到缓存或缓存已经失效)查看Chrome浏览器的DNS缓存信息(chrome://net-internals/#dns):3、读取本地HOST文件4、浏览器发起一个DNS的一个系统调用运营商服务器把结果返回操作系统内核同时缓存起来操作系统内核把结果返回浏览器最终浏览器拿到www.

    2020/04/05
  • 什么是流式计算?菜鸟知识_计算新手入门

    一、流式计算的背景在日常生活中,我们通常会先把数据存储在一张表中,然后再进行加工、分析,这里就涉及到一个时效性的问题。如果我们处理以年、月为单位的级别的数据,那么多数据的实时性要求并不高;但如果我们处理的是以天、小时,甚至分钟为单位的数据,那么对数据的时效性要求就比较高。在第二种场景下,如果我们仍旧采用传统的数据处理方式,统一收集数据,存储到数据库中,之后在

    2020/03/26
  • 学习掌握小白攻略proto与prototype_prototype攻略教程

    一,前言对一个知识点是否完全把握,最好的校验方法就是能否用自己的语言将其表述出来。 原型与原型链一直是学习 JS 绕不过的知识点,其中proto 与 prototype 最为让人头疼,这里简单的写下我自己的理解,从原型与原型链中拆解 proto 与 prototype ,希望能对大家有所帮助。一,原型1,定义在javascript中,函数可以有属性。 每个

    2020/03/24
  • Macaca入门教程_一套面向用户端软件的测试解决方案

    Macaca入门教程 官方网址:https://macacajs.com/ GitHub:https://github.com/alibaba/macaca 简介描述:一套面向用户…

    2020/03/06
  • 缓存的三大问题使用说明_缓存基础指南

    缓存穿透定义业务系统访问压根就不存在的数据,就称为缓存穿透。危害如果海量请求查询压根就不存在的数据,
    那么这些请求都会落到数据库中,
    数据库压力剧增,可能会导致系统崩溃解决(1)缓存空数据 (2)BloomFilter:它需要在缓存之前再加一道屏障,里面存储目前数据库中存在的所有key缓存雪崩定义缓存因某种原因发生了宕机,那么原本被缓存抵挡的海量查询请求就会

    2020/03/30
  • Bootstrap Table含有按钮时表格不对齐零基础入门_表格菜鸟知识

    使用Bootstrap Table的时候,在含有按钮的情况,有时候表格的线垂直方向上不对齐解决方法:(1)调整表格的高度小些或者大些(至于为什么,并不清楚,调整高度后就对齐了)(2)加setTimeout$(‘#tableTest1’).bootstrapTable({// method: “POST”,// contentType: “applicatio

    2020/03/26
  • 如何使用SVG动画来制作游戏基础入门_游戏基础知识入门

    在使用过一段时间的SVG动画之后,我相当清楚如何利用它来制作动画片段或者网页布局。一些动画库平台,例如Greensock,和原生的CSS动画简直是绝配。于是我便打算深入地研究一下,看看我能否用这些来制作一款简单的游戏。就像一个精美的工艺品一样,好的游戏拥有许多细致的动画细节。有一天夜里,我的脑海中突然闪现了一个游戏的灵感,我马上起来,画了一些草图,之后给我的

    2020/04/03
  • Token ,Cookie和Session的区别入门基础知识_存储使用说明

    在做接口测试时,经常会碰到请求参数为token的类型,但是可能大部分测试人员对token,cookie,session的区别还是一知半解。为此我查阅大量的资料做了如下总结。 此篇文章也许是最全最通俗的关于Token ,Cookie和Session的区别的文章,好好揣摩文章的每一个字,也许你会有更深的理解!Cookiecookie 是一个非常具体的东西,指的就

    2020/04/05
  • favico.js使用攻略_一款网页图标插件,让网页图标动起来

    favico.js小白指南 官方网址:http://lab.ejci.net/favico.js/ GitHub:https://github.com/ejci/favico.js…

    2020/03/06