<!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">

    <say-to pname="koma">

        你的视频做的太差了。

    </say-to>

    <say-to pname="mike">

        你千万不要学koma。

    </say-to>

    <say-to pname="john">

        你教教他们两个吧。

    </say-to>

</div>

<script>

    Vue.component('say-to', {

        props: ['pname'],

        template: '<div>'

            + '你好，<strong>{{pname}}</strong>！'

            + '<slot></slot>'

            + '</div>',

    });

    var myApp = new Vue({

        el: '#myApp',

    });

</script>

</body>

</html>

slot

slot是父组件与子组件的通讯方式，可以将父组件的内容显示在子组件当中。

组件：slot插槽的更多相关文章

  1. Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件

    之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...

  2. 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件

    写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...

  3. 三、深入Vue组件——Vue插槽slot、动态组件

    一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...

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

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

  5. Vue slot 插槽用法：自定义列表组件

    Vue 框架的插槽(slot)功能相对于常用的 v-for, v-if 等指令使用频率少得多,但在实现可复用的自定义组件时十分有用.例如,如果经常使用前端组件库的话,就会经常看到类似的用法: < ...

  6. Vue slot插槽

    插槽用于内容分发,存在于子组件之中. 插槽作用域 父级组件作用域为父级,子级组件作用域为子级,在哪定义的作用域就在哪. 子组件之间的内容是在父级作用域的,无法直接访问子组件里面的数据. 插槽元素 &l ...

  7. vue slot插槽的使用

    slot插槽的使用场景 父组件向子组件传递dom时会用到插槽   作用域插槽:当同一个子组件想要在不同的父组件里展示不同的状态,可以使用作用域插槽.展示的状态由父组件来决定   注:想要修改父组件向子 ...

  8. Vue slot插槽内容分发

    slot插槽使用 使用场景,一般父组件中又一大段模板内容需要运用到子组件上.或者更加复杂的,子组件需要运用到父组件大段模板内容,而子组件却不知道挂载的内容是什么.挂载点的内容是由父组件来决定的. Sl ...

  9. vue中的slot插槽

    插槽,也就是slot,是组件的一块HTML模板,这块模板显示不显示.以及怎样显示由父组件来决定. 实际上,一个slot最核心的两个问题这里就点出来了,是显示不显示和怎样显示. 1.navigation ...

  10. slot 插槽的使用

    在vue 中父组件中的子组件在子组件中添加内容(html标签.文本内容),在子组件中加入slot这样页面中就会呈现出在父组件填写的内容,例如: 父组件中hello是子组件,在子组件中插入slot这样子 ...

随机推荐

  1. python非对称加密模块rsa

    一.代码 # 导入rsa库 import rsa.common class RSA(object): def __init__(self): self.key= rsa.newkeys(256) se ...

  2. 多线程--GIL锁

    GIL 即全局解释器锁,是一个互斥锁,防止多个线程在同一时间执行python代码,因为在一个python进程中,不仅有主线程而且还有该主线程开启的子线程,还有解释器开启的垃圾回收机等解释器级别的线程. ...

  3. 创建自定义ssl证书用于https

    这里,不探究证书原理.我们要完成的任务是,自己充当CA,然后签出证书供服务器使用. 本次教程是在windows实现,实验之前,确认自己的电脑中有openssl程序.如果没有,博主帮你准备了一个:htt ...

  4. 网络安全系列 之 MySQL数据库安全

    目录 数据库安全使用规则 1. 数据库版本及运行要求 2. 通用加固项 3. 用户权限 4. 连接设置 5. ssl安全认证 6. 涉及操作系统相关配置 6.1 系统资源 6.2 文件权限 数据库安全 ...

  5. js 获取指定字符串个数

    参考:https://blog.csdn.net/maqinqin/article/details/5323824 function getStrCount(scrstr,armstr) { //sc ...

  6. Mysql图解安装向导

    注:本次安装为解压缩版: 1.设置Mysql环境变量: MYSQL_HOME: D:\Java\MySql\mysql-5.7.9-winx64 PATH: %MYSQL_HOME%\bin; 2.安 ...

  7. [Luogu2135] 方块消除【区间Dp】

    Online Judge:P2135 方块消除(这题不用预处理) Label:区间Dp 题目描述 Jimmy最近迷上了一款叫做方块消除的游戏.游戏规则如下:n个带颜色方格排成一列,相同颜色的方块连成一 ...

  8. Python全栈开发：configparser模块

    #!/usr/bin/env python # -*- coding;utf-8 -*- import configparser # 创建对象 conn = configparser.ConfigPa ...

  9. 【Uva 10003】Cutting Sticks

    [Link]: [Description] 给你一根长度为l的棍子; 然后有n个切割点; 要求在每个切割点都要切割一下; 这样,最后就能形成n+1根小棍子了; 问你怎样切割,消耗的体力最小; 认为,消 ...

  10. centos 6.5 安装dotnet core 2.2

    .net core 官网地址 https://dotnet.microsoft.com/download 本次安装版本为.net core SDK v2.2.101 1.查看系统版本, 升级系统基本l ...