Vue 组件复用性和slot
1、组件可复用
2、slot元素作为组件模板之中的内容分发插槽，元素自身可以被替换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>{{msg}}</p>
<!-- 组件的复用性 -->
<my-div>登录</my-div>
<hr />
<my-div>注册</my-div>
</div>
<script src="./js/vue.js"></script>
<script>
// 全局组件
Vue.component('my-div', {
data(){
return {
id: 1,
}
},
// slot元素作为组件模板之中的内容分发插槽，元素自身可以被替换
template:`
<div>
<button><slot></slot></button>
</div>
`, })
new Vue({
el: "#app",
data(){
return {
msg: "测试",
}
}, })
</script>
</body>
</html>
Vue 组件复用性和slot的更多相关文章
- vue 组件复用 - component
vue 组件复用 - component vue 组件复用 就是对 component 标签的使用 先看图 下图看使用 结果: 可以看到 在箱包 这一项,我将banner 组件用了两次,我 每次 点击 ...
- vue组件详解——使用slot分发内容
每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...
- vue 组件复用不刷新
情景: 两个路由"/a", "/b"公用一个页面组件, 在"/a"路由中, 第一列是序号, 在"/b"路由中, 第一列是 ...
- Vue组件的介绍与使用
组件系统是将一个大型的界面切分成一个一个更小的可控单元. 组件是可复用的,可维护的. 组件具有强大的封装性,易于使用. 大型应用中,组件与组件之间交互是可以解耦操作的. 全局组件的使用 <!DO ...
- vue组件详解（四）——使用slot分发内容
一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...
- Vue.js 组件复用和扩展之道
软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳 ...
- vue教程3-05 vue组件数据传递、父子组件数据获取，slot,router路由
vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...
- [Vue]组件——插槽：slot（匿名插槽，具名插槽）与slot-scope（作用域插槽）
1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...
- Vue组件之props,$emit与$on以及slot分发
组件实例之间的作用域是孤立存在,要让它们之间的信息互通,就必须采用组件的通信方式 props用于父组件向子组件传达信息 1.静态方式 eg: <body> <div id=&quo ...
随机推荐
- H3C IPv6邻居发现协议
- P1010 数值交换
题目描述 输入两个数 \(a\) 和 \(b\) ,将两个数交换,并输出交换后的 \(a\) 和 \(b\) . 输入格式 输入两个整数 \(a,b(1 \le a,b \le 10^6)\) 输出格 ...
- java编程规范大全
JAVA编程规范大全 命名规范 定义这个规范的目的是让项目中所有的文档都看起来像一个人写的,增加可读性,减少项目组中因为换人而带来的损失.(这些规范并不是一定要绝对遵守,但是一定要让程序有良好的可读性 ...
- GitHub使用详细流程（多人开发）
联合项目开发GIThub使用 分支 在没有使用分支之前,git会默认有一个分支, 就是主分支(master分支,还记得 git push –u origin master这个命令吗?) 这里的mast ...
- dotnet 控制台读写 Sqlite 提示 no such table 找不到文件
在使用 dotnet 读写 Sqlite 可以通过 EF Core 的方法,但是在 EF Core 创建的数据库可能和读写的数据库不是相同的文件 在我运行代码的时候发现在通过迁移创建数据库,创建的文件 ...
- HDU 6444 Neko's loop（单调队列）
Neko has a loop of size nn. The loop has a happy value aiai on the i−th(0≤i≤n−1)i−th(0≤i≤n−1) grid. ...
- Python6_模块、包、import、from import的解释
先说一下模块和包是什么? 模块(module):简单来说一个模块(module)就是一个py文件.在python中是这么约定. 模块里面有函数.类,就是一组代码的集合. 模块显然要有一个名字,这个 ...
- MySQL 命令行（转）
1.登录mysql 本地:mysql -u root -p, 回车后输入密码; 也可以p后不加空格,直接加密码.回车就登录了 远程:mysql -hxx.xx.xx.xx -u -pxxx 2.查看数 ...
- STM32 命名方法
1.STM32型号的说明:以STM32F103RBT6这个型号的芯片为例,该型号的组成为7个部分,其命名规则如下: STM32 ST公司生产的Cortex-M内核的32位微控制器 F F代表产品类型 ...
- 记mysql一次莫名的1062错误
1062 Duplicate entry '...' for key 'PRIMARY指的是主键重复或者唯一索引重复. 本来mysql表中未设主键和唯一索引,准备加上,但是设置的时候总是提示1062, ...