<!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. How can I check the last time stats was run on Oracle without using OEM

    All of the following data dictionary tables have a LAST_ANALYZED column (replace * with USER/ALL/DBA ...

  2. oracle10G rac asm 安装总结

    前言 安装步骤是参考三思博主(http://blog.chinaunix.net/uid-22741583-id-177284.html),安装的时候由于概念没搞清楚,急于求成,折腾了两天才顺利装完, ...

  3. 【vlfeat】O(n)排序算法——计数排序

    今天想在网上找一个实现好的er算法来着,没啥具体的资料,无奈只能看vlfeat的mser源码,看能不能修修补补实现个er. 于是,看到某一段感觉很神奇,于是放下写代码,跑来写博客,也就是这段 /* - ...

  4. jQuery实现网页放大镜功能 转载

    京东等电商网站中可以对商品进行放大观察,本文要实现的就是模仿这个放大镜功能,大致效果如下图所示: 简要说明实现思路: 1.原图窗口与放大窗口插入的是同一个图片,不过原图窗口的图片要适当缩小,放大窗口图 ...

  5. Math.random()详解

    Math.random()是令系统随机选取大于等于 0.0 且小于 1.0 的伪随机 double 值,是Java语言常用代码.例如:double a=Math.random()*(3-1)+1,设置 ...

  6. pywin3的简介

         微软Windows的Python扩展提供了对Win32 API的访问.创建和使用COM对象的能力以及PythOnWin环境.Pywin32是一个Python库,为python提供访问Wind ...

  7. Python之-异常处理

    1.python中处理异常的方式 #coding:utf8 filename=raw_input("请输入你要操作的文件") try: f=open(filename) print ...

  8. linux c（一）Helloworld

    终端的屏幕上输入命令如下: 使用vi helloworld.c打开helloworld.c文件,写下如下代码:

  9. hibernate.Criteria分页排序模糊查询

    org.hibernate.Criteria criteria = simpleDAO.getSession().createCriteria(Event.class); Criterion c = ...

  10. 用 Flask 来写个轻博客 (6) — (M)VC_models 的关系(one to many)

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 前言 一对多 再一次 sync db How to use ...