vue 通过插槽分发内容
<!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 通过插槽分发内容的更多相关文章
- vue使用插槽分发内容slot的用法
将父组件的内容放到子组件指定的位置叫做内容分发 //在父组件里使用子组件 <son-tmp> <div>我是文字,我需要放到son-tmp组件里面制定的位置</div&g ...
- vue组件-使用插槽分发内容(slot)
slot--使用插槽分发内容(位置.槽口:作用: 占个位置) 官网API: https://cn.vuejs.org/v2/guide/components.html#使用插槽分发内容 使用组件时,有 ...
- Vue组件-使用插槽分发内容
在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer></app-fo ...
- vue 使用Slot 分发内容 学习总结。
https://cn.vuejs.org/v2/guide/components.html#使用-Slot-分发内容 官方API地址 我对solt的理解是当组件中某一项需要单独定义,那么就应该使 ...
- vue2.0使用slot插槽分发内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Vue结合slot插槽分发父组件内容实现高度复用、更加灵活的dialog组件
之前写过一篇关于vue实现dialog会话框组件的文章(http://www.cnblogs.com/fozero/p/8546883.html)[http://www.cnblogs.com/foz ...
- 使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件
写在前面 之前写过一篇关于vue实现dialog会话框组件的文章http://www.cnblogs.com/fozero/p/8546883.html, 讲到了如何实现一个vue对话框组件,其中涉及 ...
- Vue:实践学习笔记(6)——使用SLOT分发内容
Vue:实践学习笔记(6)——使用SLOT分发内容 Slot Slot是什么 Slot是父子组件的通讯方式,可以将父组件的内容显示到子组件之中. 使用SLOT前 比如我在定义组件的时候,在里面输入了X ...
- Vue 组件&组件之间的通信 之 使用slot分发内容
slot详细介绍网址:https://cn.vuejs.org/v2/api/#slot 有时候我们需要在自定义组件内书写一些内容,例如: <com-a> <h1>title& ...
随机推荐
- 入门GoldenGate总结
前言 GoldenGate 是oracle官方的一款数据同步产品,类似于msyql的主从复制,配置也稍稍复杂,其中概念一定要搞清楚,不然会被坑的爬不起. 坑 1.数据在线同步(不是指数据初始化),只能 ...
- Java高级应用(一)
下面来介绍一下Java的高级应用有哪些. Java高级应用 第一讲 类加载 (一).类加载 类加载器是一个特殊的类,负责在运行时寻找和加载类文件.Java允许使用不同的类加载器,甚至是自定义类加载器. ...
- Netflix：我们为什么要将GraphQL引入前端架构？
作者|Artem Shtatnov译者|无明 在这篇文章中,我们将分享 Netflix 在这些应用程序的前端架构中引入 GraphQL 所积累的经验. 在内部,我们把用于管理广告创建和组装的主要应用程 ...
- PC-lint初体验
当时用lint安装到VS2008上,找到两篇比较好的帖子: https://www.cnblogs.com/sanghg/p/4550829.html //这个 ...
- 【leetcode】757. Set Intersection Size At Least Two
题目如下: 解题思路:贪心算法.首先把intervals按第二个元素从小到大排序,然后遍历intervals,如果集合S和intervals[i]没有交集,那么把intervals[i]的最大值和次大 ...
- Selenium之XPATH定位方法
转自 https://www.cnblogs.com/hanmk/p/8997786.html https://www.cnblogs.com/hanmk/p/9015502.html 感谢原作者 1 ...
- RBAC权限设计（一）
序言 RBAC表结构 用户表 角色表 权限表 用户角色(关系)表 角色权限(关系)表 sql脚本 /* Navicat MySQL Data Transfer Source Server : 127. ...
- PyCharm 默认快捷键
1.编辑(Editing) Ctrl + Space 基本的代码完成(类.方法.属性)Ctrl + Alt + Space 快速导入任意类Ctrl + Shift + Enter 语句完 ...
- BZOJ 3105: [cqoi2013]新Nim游戏(线性基)
解题思路 \(nim\)游戏先手必胜的条件是异或和不为\(0\),也就是说第一个人拿走了若干堆后不管第二个人怎么拿都不能将剩余堆的异或和变成\(0\).考虑线性基,其实就是每个数对线性基都有贡献,任何 ...
- [NOIP模拟25]题解
A.字符串 Catalan数不能再裸了 #include<cstdio> #include<iostream> #include<cstring> using na ...