<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>表单事件绑定</title>

     </head>

     <body>

         <div id="app">

             <alert-box>

                 Something bad happened.

             </alert-box>

         </div>

         <!-- 开发环境版本，包含了用帮助的命令行警告 -->

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

         <script type="text/javascript">

             // 定义一个名为 button-counter 的新组件

             Vue.component('alert-box', {

               template: `

                 <div class="demo-alert-box">

                   <strong>Error!</strong>

                   <slot></slot>

                 </div>

               `

             })

             new Vue({

                 el: '#app'

             })

         </script>

     </body>

 </html>

vue 通过插槽分发内容的更多相关文章

  1. vue使用插槽分发内容slot的用法

    将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...

  2. vue组件-使用插槽分发内容(slot)

    slot--使用插槽分发内容(位置.槽口:作用: 占个位置) 官网API: https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容 使用组件时,有 ...

  3. Vue组件-使用插槽分发内容

    在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-fo ...

  4. vue 使用Slot 分发内容 学习总结。

    https://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容    官方API地址 我对solt的理解是当组件中某一项需要单独定义,那么就应该使 ...

  5. vue2.0使用slot插槽分发内容

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

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

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

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

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

  8. Vue:实践学习笔记(6)——使用SLOT分发内容

    Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...

  9. Vue 组件&组件之间的通信 之 使用slot分发内容

    slot详细介绍网址:https://cn.vuejs.org/v2/api/#slot 有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title& ...

随机推荐

  1. 【转】Java里如何实现线程间通信

    正常情况下,每个子线程完成各自的任务就可以结束了.不过有的时候,我们希望多个线程协同工作来完成某个任务,这时就涉及到了线程间通信了. 本文涉及到的知识点:thread.join(), object.w ...

  2. Cloudera Hadoop启用Kerberos认证

    一.Kerberos 二.安装 node01服务器安装Kerberos的核心服务master KDC,node02和node03安装Kerberos client cm也安装在node01上了 1.m ...

  3. shell 读取文件的每一行

    1.使用while #!/bin/bash while read line do echo $line done < file.txt #!/bin/bash cat file.txt | wh ...

  4. 【Flutter学习】事件处理与通知之事件处理

    一,概述 移动应用中一个必不可少的环节就是与用户的交互,在Flutter中提供的手势检测为GestureDetector. Flutter中的手势系统分为二层: 第一层是触摸原事件(指针) Point ...

  5. Python基础教程（002）--编译型语音和解释器

    前言 理解解释器和编译型语言,及跨平台 解释器(科普) 计算机不能直接理解任何出机器语言以外的机器语言,必须要把程序员写的程序语言进行翻译,就是编辑. 将其他语音翻译成机器语言,被称为编译器. 编译器 ...

  6. CDN技术之-介绍

    “第一公里”是指万维网流量向用户传送的第一个出口,是网站服务器接入互联网的链路所能提供的带宽.这个带宽决定了一个网站能为用户提供的访问速度和并发访问量.如果业务繁忙,用户的访问数越多,拥塞越严重,网站 ...

  7. mock 数据 解决方案

    前端工程化之--Mock解决方案   https://www.jianshu.com/p/720b12b5d120 一.为什么要使用mock数据: 1.后端接口数据没有的时候,前端根据接口文档,使用 ...

  8. CTO 技能图谱skill-map

    # CTO 技能图谱 ### 岗位职责* 建立技术团队文化* 规划技术发展路线* 落地产品研发成果* 宣传公司技术品牌* 吸引优秀技术人才 ### 基本素质* 正直诚实的道德修养* 谦虚谨慎的工作态度 ...

  9. 6个实例详解如何把if-else代码重构成高质量代码

    本文提纲: 为什么我们写的代码都是if-else?这样的代码有什么缺点?是否有优化的方法?如何重构?异常逻辑处理型重构方法状态处理型重构方法为什么我们写的代码都是if-else?程序员想必都经历过这样 ...

  10. GDB can't continue if no space left

    [root@premta ~]# df -hFilesystem Size Used Avail Use% Mounted on/dev/sda3 36G 36G 0 100% /tmpfs 1.5G ...