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 链路聚合显示及维护
- flex布局属性说明
flex布局又称为盒子布局或弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 Flex 布局. 给父容器添加display: flex/inline-flex;属性,即可使容器内容采 ...
- nodejs + webpack4 + babel6 结合写Chrome浏览器插件记录(2)
上来先来看下当前实现的效果吧. 前言 首先感谢第一篇留言鼓励的同学,最近各种繁杂的事,时间占用较多,但是也总抽空继续改造这个项目,期间遇到了各种Vue渲染的问题,常规的字符串渲染会在Chrome插件中 ...
- C语言动态内存
动态分配内存的概述 在数组一章中,介绍过数组的长度是预先定义好的,在整个程序中固定不变,但是在实际的编程中,往往会发生这种情况,即所需内存空间取决于实际输入的数据,而无法预先确定.为了解决上述问题,c ...
- 阿里云基于OSS的云上统一数据保护方案2.0正式发布
近年来,随着越来越多的企业从传统经济向数字经济转型,云已经渐渐成为数据经济IT新常态.核心业务系统上云,云上的业务创新,这些都产生了大量的业务数据,这些数据也成为了企业最重要的资产.资源.阿里云基于O ...
- JavaScript递归注意事项
var svg_node = document.getElementById("svgnode") function parents(posnode,selector) { var ...
- navicat创建存储过程时报错1064
1.这是创建的存储过程 2.一保存就会出错 3.后来上网查了一下是存储过程的参数没有设定长度导致的,我们在Navicat中创建存储过程时参数的长度需要自己动手去添加的否则就会包这种错误. 添加上参数的 ...
- Vim编辑器Go简单入门
今天是一次做Go的笔记,一开始直接打开Github上的Go项目然后跑到Wiki位置,然后作者列出了一堆学习Go的资料,这里我 以第一个学习资料https://tour.golang.org/作为Go学 ...
- cmake安装mysql及多实例配置方法
一.安装mysql 1. 生产环境如何选择MySQL版本 1. 选择社区版的稳定GA版本2. 可以选择5.1或5.5.互联网公司主流5.5, 其次是5.1和5.63. 选择发布后6个月以上的GA版4. ...
- 组长组Beta阶段贡献分配规则
此作业要求参见:https://edu.cnblogs.com/campus/nenu/2019fall/homework/9910“ “组长”组贡献分分配规则: 组里五位成员分别有入团队贡献分10分 ...