关于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. 2017-2018-2 『网络对抗技术』Exp1:PC平台逆向破解 20165335

    一.实验目标: 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任何用户输入的字符串. 该程序同时包含另一个代码片段,get ...

  2. IP通信基础学习第八周

    安装完华三模拟器,拖多台设备到工作区,全部启动及配置,建立好拓扑图,之后启动命令行终端. 配置登录用户,口令的指令有: <H3C>                       //用户直行 ...

  3. Apache Maven 3.6.1配置安装

    Apache Maven 3.6.1配置安装 一.下载 maven下载地址:http://maven.apache.org/download.cgi 二.安装 1,解压即可用 2,环境变量配置 MAV ...

  4. 利用Android-FingerprintManager类实现指纹识别

    安卓指纹识别 利用FingerprintManager主类进行指纹识别. Github项目地址 在安卓6.0中新增了API,FingerprintManager类,它是Google提供的帮助访问指纹硬 ...

  5. Java基础学习-类型转换之隐式转换

    +是一个运算符,我们应该能够看懂,做数据的加法. boolean类型不能转换为其他的数据类型. 默认转换:     byte,short,char--int--float--double     by ...

  6. 王之泰201771010131《面向对象程序设计(java)》第十七周学习总结

    第一部分:理论知识学习部分 第14章 并发 线程同步 多线程并发运行不确定性问题解决方案:引入线 程同步机制,使得另一线程要使用该方法,就只 能等待. ⚫ 在Java中解决多线程同步问题的方法有两种: ...

  7. jsp+postgresql学习笔记(1)用户登录与注册

    前期准备: tomcat的安装与配置(略) jdk的安装与配置(略) eclipse软件安装与配置(略) webstrom软件或IDEA的安装与配置(大概用了IDEA就不需要eclipse了,但是怎么 ...

  8. Go-延时函数defer

    关于延时调用函数(Deferred Function Calls)      延时调用函数基本语法如下: defer func_name(param-list) {} 当一个函数前有关键字 defer ...

  9. mybatis逆向工程失败

    [ERROR] Failed to execute goal org.mybatis.generator:mybatis-generator-maven-plugin:1.3.6:generate ( ...

  10. Yum安装时出现 The program yum-complete-transaction is found in the yum-utils package

    yum安装时出现 The program yum-complete-transaction is found in the yum-utils package yum之后,会显示上信息,并且最终执行结 ...