关于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. 2018.2.22 学习笔记 random模块及每日一练

    给你一个字符数,把它的每个字符之间加上一个空格,形成一个新字符串. 例如:I love FishC.  变成I   l o v e   F i s h C . 跟小甲鱼学编程 变成 跟 小 甲 鱼 学 ...

  2. JavaScript中的转译符

    转译字符 含义     \o NUL字符(\u0000) \b 退格符(\u0008) \t 水平制表符(\u0009) \n 换行符(\u000A) \v 垂直制表符(\u000B) \f 换页符( ...

  3. Flask-Migrate

    终于到了Flask-Migrate,之前在看Flask-SQLAlchemy的时候, Flask支持 makemigration / migrate 吗? 答案在这里该诉你,如果你同时拥有两个三方组件 ...

  4. Linux基础命令---ipcs显示进程通信

    ipcs ipcs指令用来显示进程间通信状况.“-i”选项允许指定特定的资源id.将只打印有关此id的信息. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora.SUS ...

  5. Winform 加载datagridview

    string str = @"Data Source=(localdb)\MSSQLLocalDB;Initial Catalog=Test;Integrated Security=True ...

  6. GoldenGate for bigdata 12.3.2.1版本新特性

    在Oracle Tenical Network(OTN)上已经可以下载到最新的ogg4bd版本,地址如下:http://www.oracle.com/technetwork/middleware/go ...

  7. iOS进阶之UDP代理鉴权过程

    上一篇介绍的是TCP代理的鉴权过程,这篇将介绍UDP代理的大致鉴权过程. 在UDP鉴权过程中,有几点是需要注意的.首先,UDP是一种无连接协议,不需要连接,使用广播的方式:其次,为了通过鉴权,所以需要 ...

  8. sdoi2018旧试题 证明

  9. mysql中利用show profile很直观的看到查询缓存的作用。

    1.首先,开启mysql的查询缓存. 查看查询缓存情况: MariaDB [test]> show variables like '%query_cache%';+--------------- ...

  10. 进行分支切换时,出现error的修复方法

    进行分支切换时,出现如此错误,导致无法正常切换:error: The following untracked working tree files would be overwritten by ch ...