<!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. codeforces 1100D-Dasha and Chess

    传送门:QAQQAQ 题意:This is an interactive task. 999*999国际象棋棋盘中有一个王和666个车,玩家走王,电脑走车,玩家先走,玩家的目的是让对方的车将到自己的王 ...

  2. PAT甲级——A1138 Postorder Traversa【25】

    Suppose that all the keys in a binary tree are distinct positive integers. Given the preorder and in ...

  3. git工作区和暂存区图

  4. LINUX用户和用户组操作命令

    Id Finger Pwck 检查/etc/passwd配置文件内的信息与实际主文件夹是否存在,还可比较/etc/passwd和/etc/shadow的信息是否一致,另外如果/etc/passwd中的 ...

  5. 05.Mybatis动态sql

    1.IF标签 需求:根据条件查询用户 在Mapper.xml中编写 <!-- 根据sex和username查询user --> <select id="findbySexa ...

  6. html-from提交表单

    使用form创建的仅仅是一个空白的表单, 我们还需要向form中添加不同的表单项 <!DOCTYPE html> <html> <head> <meta ch ...

  7. python中字符串的处理总结

    在爬取新浪财经7*24直播中, 遇到了Unicode编码中文转utf-8的问题, 采用如下代码可以实现转化 >>> a='\\u76d1\\u7ba1\\u5bf929' >& ...

  8. [JZOJ4759] 【雅礼联考GDOI2017模拟9.4】石子游戏

    题目 描述 题目大意 在一棵树上,每个节点都有些石子. 每次将mmm颗石子往上移,移到根节点就不能移了. 双方轮流操作,问先手声还是后手胜. 有三种操作: 1. 询问以某个节点为根的答案. 2. 改变 ...

  9. vue-draggable-resizable 拖拽缩放插件

    安装: npm install --save vue-draggable-resizable 使用: <template>   <div style="height: 50 ...

  10. 高斯消元+期望dp——light1151

    高斯消元弄了半天没弄对.. #include<bits/stdc++.h> using namespace std; #define maxn 205 #define eps 1e-8 d ...