<!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. overload和override二者之间的区别

    overload和override三者之间的区别 Overload是重载,是有相同的方法名,但参数类型或个数彼此不同Override是重写,是在子类与父类中,子类中的方法的方法名,参数个数.类型都与父 ...

  2. 机器学习 101 Mahout 简介 建立一个推荐引擎 使用 Mahout 实现集群 使用 Mahout 实现内容分类 结束语 下载资源

      机器学习 101 Mahout 简介 建立一个推荐引擎 使用 Mahout 实现集群 使用 Mahout 实现内容分类 结束语 下载资源 相关主题   在信息时代,公司和个人的成功越来越依赖于迅速 ...

  3. 左神算法书籍《程序员代码面试指南》——3_05Morris遍历二叉树的神级方法【★★★★★】

    [问题]介绍一种时间复杂度O(N),额外空间复杂度O(1)的二叉树的遍历方式,N为二叉树的节点个数无论是递归还是非递归,避免不了额外空间为O(h),h 为二叉树的高度使用morris遍历,即利用空节点 ...

  4. docker-compose (单机版的容器编排工具)

    类似于ansible剧本 yml 格式 要使用这个编排工具,必须先安装 yum install -y docker-compose cd wordpress/ vi docker-compose.ym ...

  5. Oracle 从 dual 表中查询返回多行记录

    同时查询出十条数据 ; 按照这个特性计算两个日期之间的工作日: select days, week as days, to_char(to_date(, 'day') as week from dua ...

  6. 转载 pep8安装

    一.前提准备 在Python安装了pip的情况下,命令行输入 pip install autopep8 二.PyCharm设置 成功之后,打开PyCharm,File-->setting--&g ...

  7. Rainbow的信号

    Rainbow的信号 有一串长度为n的数列,现在从中等概率选出l,r,如果l大于r,则交换,有三个询问 l~r间的数与和的数学期望 l~r间的数或和的数学期望 l~r间的数异或和的数学期望 对于100 ...

  8. Verilog与VHDL的混合模块例化

    1,大小写与转义 对VHDL解释器而言,对于模块名和端口名, (1) 若有转义 a) 先不考虑转义,寻找与字符串完全相同的VHDL模块: 若找不到: b) 考虑转义,寻找对应的Verilog模块. ( ...

  9. [JZOJ5355] 【NOIP2017提高A组模拟9.9】保命

    题目 描述 题目已经足够清晰了,所以不再赘述题目大意. 思考历程 一眼看下去,好像是一道大水题! 然而,再看几眼,感觉又不是一道水题! 然后想了半天,感觉它特别难转移! 最终打了一个暴力,然后发现样例 ...

  10. Python-面向对象之封装与多态

    目录 组合 什么是组合 使用组合的目的 如何使用组合 封装 什么是封装 为什么要封装 如何封装 访问限制机制 什么是访问限制机制 访问限制机制的目的 如何使用访问限制 property 什么是prop ...