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& ...
随机推荐
- C++ 使用老牌库xzip & unzip对文件进行压缩解压
原文链接 https://www.codeproject.com/Articles/7530/Zip-Utils-clean-elegant-simple-C-Win https://www.code ...
- PyTorch 计算机视觉的迁移学习教程代码详解 （TRANSFER LEARNING FOR COMPUTER VISION TUTORIAL ）
PyTorch 原文: https://pytorch.org/tutorials/beginner/transfer_learning_tutorial.html 参考文章: https://www ...
- python学习--第三天 粗略介绍人脸识别
首先安装opencv 在安装opencv过程中遇到一些错误(百度解决) 直接贴代码吧,讲师略讲了一下,体会不深,以后有机会深入学习,再详细介绍解释吧 人脸识别训练集应该可以网上下载吧,都是开源的 im ...
- Git分支,合并,切换分支的使用
1.创建合并分支 在我们每次的提交,Git都把它们串成一条时间线,这条时间线就是一个分支.截止到目前,只有一条时间线,在Git里,这个分支叫主分支,即master分支.HEAD指针严格来说不是指向提交 ...
- shell读取文件第一行和最后一行，小数的运算比较
1. 读取文件的第一行:head -n +1 file.txt 读取文件的最后一行: tail -n -1 file.txt echo 12:30:55 | cut -d: -f 1 结果为12,意思 ...
- loadRunner之接口测试
接口测试需求: 1.脚本支持循环测试,并且每次测试的请求报文不一样(字段stbId每次请求不一样) 2.输出每次测试的请求报文和响应报文 3.根据响应报文判断接口调用是否成功 4.输出最终测试结果:循 ...
- flask中app.py: error: invalid choice: 'insert'........的问题
在flask中,分为两种操作方式,url指向函数或者终端指向函数,最终目的就是让函数执行,触发方式不同.终端执行更加安全, 另外如果在终端执行的时候出现 : 就是说明 insert 没有在@ mana ...
- 2019ccpc秦皇岛/Gym102361 F Forest Program 仙人掌上dfs
题意: 某地沙漠化严重,沙漠里长了很多仙人掌,现在要让你删掉仙人掌的一些边让它的所有连通分量都是树,就完成了沙漠绿化(什么鬼逻辑?)让你计算删边的方案数. 仙人掌是一种特殊的图,它的每一条边只属于1或 ...
- python 100day notes(2)
python 100day notes(2) str str2 = 'abc123456' print(str1.endswith('!')) # True # 将字符串以指定的宽度居中并在两侧填充指 ...
- ABP的新旧版本
新版本 https://abp.io/documents/abp/latest/Index https://github.com/abpframework/abp ABP is an open sou ...