<!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. Activity详解三 启动activity并返回结果 转载 https://www.cnblogs.com/androidWuYou/p/5886991.html

    首先看演示: 1 简介 .如果想在Activity中得到新打开Activity 关闭后返回的数据,需要使用系统提供的startActivityForResult(Intent intent, int ...

  2. shell常用命令及正则辅助日志分析统计

    https://www.cnblogs.com/wj033/p/3451618.html 正则日志分析统计 3 grep 'onerror'  v3-0621.log | egrep  -v '(\d ...

  3. import socket模块二

    ---恢复内容开始--- 优化两个小脚本实现不间断聊天: server.py: import socket sk = socket.socket() # 创建socket addess = ('127 ...

  4. vue-router路由跳转判断用户是否存在

    router.beforeEach((to, from, next) => { //console.log("to:", (to)); //console.log(" ...

  5. Spring中AOP的实现

    Spring中整合了AOP的功能,虽然有不足,没有专门做AOP框架的那么完美,但是用一用感觉还是不错的 一些概念: AOP 面向切面编程 aspect 切面/切面类(我个人认为一个真正被解耦的程序,切 ...

  6. js 仿微信投诉—引入vue.js，拆分组件为单个js

    效果 页面目录 index.html <!DOCTYPE html > <html> <head> <meta charset="UTF-8&quo ...

  7. layui+croppers完成图片剪切上传

    不多说直接上代码: 前台代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" / ...

  8. 记录redis安装及常用命令

    Redis安装及常用命令 一.安装 1.下载,解压,进入redis解压目录,make. make PREFIX=目录/redis install :安装到指定目录文件名为redis. 2.将解压目录里 ...

  9. 【数位DP】[LOJ10163]Amount of Degrees

    发现自己以前对数位DP其实一窍不通... 这题可以做一个很简单的转换:一个数如果在$b$进制下是一个01串,且1的个数恰好有k个,那么这个数就是合法的(刚开始没判断必定是01串,只判断了1的个数竟然有 ...

  10. Django项目在linux上运行

    目录 前言 上传 解压 制作启动脚本 这是一篇关于如何在linux下,以后台进程的方式运行服务,命令改改基本上就通用了. 前言 我们在windows本地开发完Django项目后,需要把项目部署到lin ...