<!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. error C2054:在“inline”之后应输入“(”

    转自VC错误:http://www.vcerror.com/?p=79 问题描述: error C2054:在"inline"之后应输入"(" 按照编译错误的提 ...

  2. Entityframwork.extended 配置mysql

    entityframework.extended 这个是个很好的扩展,不过由于默认是配置成MSSQL的,今天在github上面 看到一个解决方案,亲测可用,下面贴代码 1.在DbContext 修改默 ...

  3. wpf 获取image控件的图片并保存

    XMAL代码如下: <Image Name="ImageToSave" Source="Images/pic_bg.png" Grid.RowSpan=& ...

  4. netty 解决粘包拆包问题

    netty server TimeServer package com.zhaowb.netty.ch4_3; import io.netty.bootstrap.ServerBootstrap; i ...

  5. sparkStreaming入门

    1.环境 jdk : 1.8 scala : 2.11.7 hadoop:2.7 spark : 2.2.0 2. 开发工具 idea 2017.2 3.maven的pom文件 <depende ...

  6. Spark中使用Java编程的常用方法

    原文引自:http://blog.sina.com.cn/s/blog_628cc2b70102w9up.html 一.初始化SparkContext System.setProperty(" ...

  7. thinkone无法重新创建数据库的问题 newsy

    错误描述: 无法加载数据库驱动: Think\Db\Driver\    前后装了OneThink1.0和OneThink1.1都没成功,都是卡在了安装页面的三个step,读者们你们也遇到一样的情况吗 ...

  8. JavaScript特效源码(8、其他特效)

    1.中文日期 中文日期[无须修改][共1步]] ====1.将以下代码加入HEML的<body></body>之间 <script LANGUAGE="Java ...

  9. dataset datatable 转json

    class ToJosn { #region dataTable转换成Json格式 /// <summary> /// dataTable转换成Json格式 /// </summar ...

  10. css3 ---2 属性的选择器

    存在和值属性选择器1:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何. [name]{ background: pink; } <!DOCTYPE html& ...