<!DOCTYPE html>

<html lang="zh">

<head>

    <title></title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script src="https://unpkg.com/vue/dist/vue.js"></script>

    <link href="../css/style.css" rel="stylesheet"> </head>

<body>

<div id="myApp">

    <nba-all-stars c="奥尼尔" pf="加内特">

        <span slot="sf">皮尔斯</span>

        <span slot="sg">雷阿伦</span>

        <span slot="pg">隆多</span>

    </nba-all-stars>

</div>

<script>

    Vue.component('nba-all-stars', {

        props: ['c', 'pf'],

        template: '<div>'

            + '<div>中锋：{{c}}</div>'

            + '<div>大前：{{pf}}</div>'

            + '<div>小前：<slot name="sf"></slot></div>'

            + '<div>分卫：<slot name="sg"></slot></div>'

            + '<div>控卫：<slot name="pg"></slot></div>'

            + '</div>',

    });

    var myApp = new Vue({

        el: '#myApp',

    });

</script>

</body>

</html>

组件：组合slot的更多相关文章

  1. 28-React state提升、组件组合或继承

    Lifting State Up state提升 对于在React应用程序中更改的任何数据,应该有一个单一的数据源.通常,都是将state添加到需要渲染的组件.如果其他组件也需要它,您可以将其提升到最 ...

  2. 8.Vue组件三---slot插槽

    主要内容:  1. 什么是插槽 2. 组件的插槽 3. 插槽的使用方法 4. 插槽的具名 5. 变量的作用域 6. slot的作用域 一. 什么是插槽呢? 1. 生活中的插槽有哪些呢? usb插槽, ...

  3. 给小程序组件创建slot

    <!--comviewonents/juan/juan.wxml--> <view class="model-wrapper" hidden="{{vi ...

  4. 组件：slot插槽

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

  5. Vue.js 2使用中的难点举例--子组件，slot, 动态组件，事件监听

    一例打尽..:) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  6. Vue组件-组件组合

    组件设计初衷就是要配合使用的,最常见的就是形成父子组件的关系:组件 A 在它的模板中使用了组件 B. <html> <head> <title>Vue组件 A 在它 ...

  7. vue组件详解（四）——使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...

  8. vue组件详解——使用slot分发内容

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code     一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...

  9. Akka（18）： Stream：组合数据流，组件-Graph components

    akka-stream的数据流可以由一些组件组合而成.这些组件统称数据流图Graph,它描述了数据流向和处理环节.Source,Flow,Sink是最基础的Graph.用基础Graph又可以组合更复杂 ...

随机推荐

  1. 基础数据类型补充 set集合 深浅拷贝

    一.基础数据类型补充 1. "拼接字符串".join(可迭代对象) 可迭代对象为列表时,输出列表元素与拼接字符串的拼接 li = ['张三', '李四', '王五', '赵四'] ...

  2. dart 异步

    使用异步有两种方法 then 或者 async/await. async/await 方法更易于理解,

  3. SPSS分析：Bootstrap

    SPSS分析:Bootstrap 一.原理: 非参数统计中一种重要的估计统计量方差进而进行区间估计的统计方法,也称为自助法.其核心思想和基本步骤如下: 1.采用重抽样技术从原始样本中抽取一定数量(自己 ...

  4. 在windows中用cmd命令执行python无限循环程序如何停止

    在windows中用cmd命令测试python带有无限循环的程序,当想要终止时, 即linux中的Ctrl + D 相似的功能时可以用 Ctrl + Pause Break, 有FN功能键的可能要使用 ...

  5. vue项目导出EXCEL功能

    因为一些原因导出EXCEL功能必须前端来做,所以就研究了一下,在网上也找了一些文章来看,有一些不完整,我做完了就记录下来,供大家参考: 1.首先先安装依赖: npm install file-save ...

  6. 数组，List，Set相互转化

    1.数组转化为List: String[] strArray= new String[]{"Tom", "Bob", "Jane"}; Li ...

  7. 授权指定ip访问mysql 服务器

      授权指定ip访问访问 授权ROOT使用密码1234从应用服务器主机连接到mysql服务器 mysql> GRANT ALL PRIVILEGES ON *.* TO 'root'@'xxx. ...

  8. day1-字符串、列表

    字符串操作: name = "Wills Qian" # 创建字符串变量 print(len(name)) # 打印字符串长度 print(name[0]) # 提取第一个字符W ...

  9. 2016.9.24初中部上午NOIP普及组比赛总结

    2016.9.24初中部上午NOIP普及组比赛总结 2016.09.24[初中部 NOIP普及组 ]模拟赛 其实这次我没比赛,早上去参加亲子活动去了. 不过在下午我做完了所有的题,感觉还好. 进度 现 ...

  10. Vue创建项目环境

    目录 Vue项目环境搭建 Vue项目创建 pycharm配置并启动vue项目 vue项目目录结构分析 vue组件(.vue文件) 全局脚本文件main.js(项目入口) 改写 Vue项目环境搭建 &q ...