<!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. selenium python bindings 初步用法及简单参考例子

    掌握selenium最简单的方法就是参考例子进行学习,下面给出之前项目的测试例子及分析 # -*- coding: utf-8 -*- import time from selenium import ...

  2. shiro real的理解，密码匹配等

    1 .定义实体及关系 即用户-角色之间是多对多关系,角色-权限之间是多对多关系:且用户和权限之间通过角色建立关系:在系统中验证时通过权限验证,角色只是权限集合,即所谓的显示角色:其实权限应该对应到资源 ...

  3. IDA 远程调试设置

    第一步,先去 IDA   dbgsrv  这个目录下,找到要调试的那个远程计算机对应的可用客户端, 比如,android_server, 把它拷贝到目标计算机中, 比如 adb push .... 然 ...

  4. 计算图像数据集的RGB均值

    最近在跑代码的时候,需要用到RGB三个通道上的均值,如下图所示: 写了一个程序,如下: import os import cv2 import random import numpy as np #数 ...

  5. vue swiper异步加载轮播图，并且懒加载

    参考:https://blog.csdn.net/weixin_38304202/article/details/78282826 效果: 此处安装省略 vue: <div class=&quo ...

  6. 【转载】Kafka介绍及升级经验分享

    http://blog.talkingdata.net/?p=3165 背景 当时的现状:开始使用Kafka的时候,使用的版本是0.7.2,当时的目的是为了替代kestrel,主要是使用Kafka来做 ...

  7. Redis理解和使用

    摘抄并用于自查笔记 1. Redis简介 我们日常Java Web开发,一般使用数据库进行存储,在数据量较大的情况下,单一使用数据库保存数据的系统会因为面向磁盘,磁盘读写速度比较慢而存在严重的性能弊端 ...

  8. 【笔记篇】C#笔记2

    返回目录:目录请戳这里~ C#数组 基本概念不提.. int[] a; bool[] b = new bool[10]; float[] c = {0.5, 57.0, 233.3, 12345.67 ...

  9. git归纳总结

    1,git 是分布式版本控制:单个电脑就是一个完整的版本库,只需向中央服务器(远程服务器)提交修改的部分.在没有网络情况下也能正常想本机服务器提交代码管理版本,有网时再推送到远程服务器.   svn是 ...

  10. csp-s模拟测试10.1(b)X 国的军队,排列组合, 回文题解

    题面:https://www.cnblogs.com/Juve/articles/11615883.html X 国的军队: 好像有O(T*N)的直接贪心做法 其实多带一个log的二分也可以过 先对所 ...