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 ...
随机推荐
- linux 操作 I/O 端口
在驱动硬件请求了在它的活动中需要使用的 I/O 端口范围之后, 它必须读且/或写到这些 端口. 为此, 大部分硬件区别 8-位, 16-位, 和 32-位端口. 常常你无法混合它们, 象你 正常使 ...
- es6笔记 day3---Promise
作用:解决异步回调问题 先知道它的大概语法就好了,这个东西需要平时用到才知道它的用处 语法: let promise= new Promise(function(resolve,reject){ // ...
- dotnet 手动解决 json 解析中不合法字符串
如果使用 Newtonsoft Json 解析字符串,字符串里面有不清真的格式,那么默认的解析将会炸掉.如果想要自己解决字符串中的不清真格式,可以使用传入 JsonSerializerSettings ...
- UVA live 6667 三维严格LIS
UVA live 6667 三维严格LIS 传送门:https://vjudge.net/problem/UVALive-6667 题意: 每个球都有三个属性值x,y,z,要求最长的严格lis的长度和 ...
- 超简单本地mock假数据测试，模拟后台数据返回必杀技
温馨提示:急性子可以直接拉到最后观看方法步骤. 什么是mock? mock就是在开发过程中,对于某些不容易构造或者不容易获取的对象,用一个虚拟的对象来创建以便测试开发的方法. 使用mock有什么好处? ...
- Java图形打印 上下对称三角星
记录记录 @Test public void name03() { int row = 9; for (int i=0,k=row,m=0;i< row;i++){ for(int l=m-i; ...
- callback、promise和async、await的使用方法
callback 回调是一个函数被作为一个参数传递到另一个函数里,在那个函数执行完后再执行.通俗的讲就是 B函数被作为参数传递到A函数里,在A函数执行完后再执行B. promise Promise 是 ...
- SpringBoot入门简易教程
使用SpringBoot来开发一个简单的restful api网关功能,目标:实现对SpringBoot的简单入门. 1. 创建SpringBoot项目 可以通过spring官网(https://st ...
- 配置一个yum私有仓库
使用一台服务器配置私有仓库做yum源,本身使用file,客户端使用http连接 安装http服务: [root@ceph1 ~]# yum -y install httpd 修改配置文件 Docume ...
- jitamin基于lnmp环境搭建
从github上面下载源代码 cd /Data/apps/nginx/html git clone https://github.com/jitamin/jitamin.git 修改配置文件 cd ...