<!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. DEDECMS织梦后台更新网站栏目无反应一键更新无响应的解决方法

    很多站长朋友反应,经常会遇到DEDECMS织梦后台更新网站栏目无反应和一键更新无响应的问题,这个问题的所在就是在于恢复了数据或者覆盖了织梦后台文件之后,点击一键更新完全没反应,或者生成栏目的时候其他都 ...

  2. Redis理解和使用

    摘抄并用于自查笔记 1. Redis简介 我们日常Java Web开发,一般使用数据库进行存储,在数据量较大的情况下,单一使用数据库保存数据的系统会因为面向磁盘,磁盘读写速度比较慢而存在严重的性能弊端 ...

  3. Linux-c对一个十六进制数的某一位取反

    enum SWITCH_FLAG { SWITCH_ALL_FLAG = , SWITCH_WEB_FLAG = , …… } unsigned int switch_by_bit_value = 0 ...

  4. LuoguP3498 [POI2010]KOR-Beads

    呀呀呀,临走10分钟刷一道水题 然而只是记一下第一次hash被卡 各种模数都被卡了... 本来想打双哈希了,后来皮了一下,模数改成了998244353,然后竟然A掉了 正着hash一遍,反着hash一 ...

  5. odoo js

    1.相关库/框架 主要:jQuery(使用1.8.3,如果使用新版本,其他jQuery插件也要升级或修改).Underscore.QWeb 其他:都在addons\web\static\lib路径下. ...

  6. mybatis结果封装到hashmap中没有null的数据

    1.在ssm框架中 在mybatis-config.xml配置文件中加下面这句代码即可解决 <setting name="callSettersOnNulls" value= ...

  7. disruptor 高效队列

    disruptor 是什么: disruptor 是一个 低延时的 无锁 环形 队列.  相较于 java的 队列 ,他有明显的优点  ,无界,无锁,低延时(解决了为内存共享问题 ) disrupto ...

  8. 《DSP using MATLAB》Problem 8.3

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...

  9. java基础之BigDecimal类

    由于在运算的时候,float类型和double很容易丢失精度,演示案例.所以,为了能精确的表示.计算浮点数,Java提供了BigDecimal BigDecimal类概述 不可变的.任意精度的有符号十 ...

  10. C# 读写 Photoshop PSD文件 操作类

    分析了PSD的文件....才发现PSD的RGB色彩保存也是 先红 蓝 绿 这样保存的 ....麻烦的.. 另外8BIM好象没什么用..可以直接跳过..直接获取最后的图形信息就可以了.. 我只对一些PS ...