关于Vue插槽的概念,大家可以从vue官网的api查看,我是看到网站的对于初接触 这个要概念的人来说不是很清楚,我来贴下原码,就比较直观了

贴下原码:

具名插槽:v-slot:header

Html:

<div id=’app’>

<child>

<template v-slot:header>

<div>this is a header</div>

</template>

</child>

</div>

script部分:

Vue.component(‘child’,{

Template:’<div><slot name=’header’></slot></div>

}

作用域插槽

Html:

<div id=’app’>

<child>

<template v-slot=’list’>

<div>{{list.item}}</div>

</template>

</child>

</div>

script部分:

Vue.component(‘child’,{

data:function(){

return{

List:[1,2,3,4,5,6]

}

}

,

Template:’<div><slot v-for=”item of list” :item=item></slot></div>

}

Vue插槽:(2.6.0以后版本弃用slot和slot-scope,改用v-slot)的更多相关文章

  1. vue mand-mobile按2.0文档默认安装的是1.6.8版本

    vue mand-mobile按2.0文档默认安装的是1.6.8版本 npm list mand-mobilebigbullmobile@1.0.0 E:\webcode\bigbullmobile` ...

  2. vue插槽用法(极客时间Vue视频笔记)

    vue插槽 插槽是用来传递复杂的内容,类似方法 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  3. vue 插槽slot总结 slot看这篇就够了

    一直模糊所以梳理一下,看了好多篇园友的文章和官网文档在这整理一下 默认插槽 //slot组件<template> <div class="slots"> s ...

  4. vue插槽slot的理解与使用

    一.个人理解及插槽的使用场景 刚开始看教程我的疑惑是为什么要用插槽,它的使用场景是什么,很多解释都是“父组件向子组件传递dom时会用到插槽”,这并不能很好的解决我的疑惑.既然你用了子组件,你为什么要给 ...

  5. [转帖]微軟将从 .NET 4 以后的版本弃用 System.Data.OracleClient

    转帖--微軟将从 .NET 4 以后的版本弃用 System.Data.OracleClient Posted on -- : eaglet 阅读() 评论() 编辑 收藏 原贴 http://www ...

  6. vue 插槽 slot

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

  7. vue 插槽 ------ slot 简单理解

    solt 插槽 内容分发 什么是插槽 Vue 实现了一套内容分发的 API,将 `` 元素作为承载分发内容的出口. 插槽显示的位置却由子组件自身决定,槽写在组件模板的什么位置,父组件传过来的模板将来就 ...

  8. vue插槽的使用

    一.插槽的基本使用 二.具名插槽的使用 三.编译作用域的例子 四.作用域插槽 一.插槽的基本使用     1.插槽的基本使用<slot></slot>     2.插槽的默认值 ...

  9. scipy1.3.0开始被弃用的imread,imresize,如何代替

    scipy1.3.0开始被弃用的imread,imresize,如何代替 SciPy最新官方文档的说明(20190730): Functions from scipy.interpolate (spl ...

随机推荐

  1. ssh很慢的问题转子

    根据网上的解决办法解决了,记录一下: 问题:ssh  ***@192.*.*.*  ,然后就一直卡在这个地方,很久以后才会出现让输入密码的提示 解决办法:1.关闭防火墙--chkconfig ipta ...

  2. ps top 命令

    pstree :显示进程树 ps: a:查看和终端有关的进程 u:显示进程是哪个用户启动的 x:和终端无关 ps aux |head 进程的分类: 和终端有关 和终端无关 进程状态: D:不可中断睡眠 ...

  3. SAP基本计量单位更改(转载)

    转载自:http://blog.csdn.net/sapmatinal/article/details/50997819 在SAP中物料创建后,一旦发生业务,其基本计量单位便很难修改.由于单位无法满足 ...

  4. HDU 1024 Max Sum Plus Plus【DP】

    Now I think you have got an AC in Ignatius.L's "Max Sum" problem. To be a brave ACMer, we ...

  5. spring事务的7种传播行为

    https://blog.csdn.net/weixin_39625809/article/details/80707695 一般用于并发,分布式锁.复杂业务情况

  6. springboot实现自定义的错误页面展示

    https://blog.csdn.net/trusause/article/details/84299886 参考 SpringBoot默认的错误处理机制 默认效果为: 返回一个默认的错误页面 Wh ...

  7. 目标指定法——S.M.A.R.T.

    一个有效的目标一定要是 具体的(Specific), 可测量的(Measureable), 可实现的(Attainable), 有现实意义的(Realistic), 以及有明确期限的(Time-bas ...

  8. UP_GetRecordByPage

    CREATE PROCEDURE [dbo].[UP_GetRecordByPage] @tblName varchar(255), -- 表名 @fldName varchar(255), -- 主 ...

  9. sqlserver存储过程的使用

    参考网址:https://www.cnblogs.com/chaoa/articles/3894311.html(存储过程)    https://www.cnblogs.com/selene/p/4 ...

  10. Struts 2 框架搭建HelloWorld

    1.导包 导入相应的jar包,在blank项目中会出现 2.书写Action类 package com.littlepage.struts; public class HelloAction { pu ...