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的更多相关文章

  1. vue 组件复用 - component

    vue 组件复用 - component vue 组件复用 就是对 component 标签的使用 先看图 下图看使用 结果: 可以看到 在箱包 这一项,我将banner 组件用了两次,我 每次 点击 ...

  2. vue组件详解——使用slot分发内容

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code     一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app& ...

  3. vue 组件复用不刷新

    情景: 两个路由"/a", "/b"公用一个页面组件, 在"/a"路由中, 第一列是序号, 在"/b"路由中, 第一列是 ...

  4. Vue组件的介绍与使用

    组件系统是将一个大型的界面切分成一个一个更小的可控单元. 组件是可复用的,可维护的. 组件具有强大的封装性,易于使用. 大型应用中,组件与组件之间交互是可以解耦操作的. 全局组件的使用 <!DO ...

  5. vue组件详解(四)——使用slot分发内容

    一.什么是slot 在使用组件时,我们常常要像这样组合它们: <app> <app-header></app-header> <app-footer>& ...

  6. Vue.js 组件复用和扩展之道

    软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself),讲的是尽量复用代码和逻辑,减少重复.组件扩展可以避免重复代码,更易于快速开发和维护.那么,扩展 Vue 组件的最佳 ...

  7. vue教程3-05 vue组件数据传递、父子组件数据获取,slot,router路由

    vue教程3-05 vue组件数据传递 一.vue默认情况下,子组件也没法访问父组件数据 <!DOCTYPE html> <html lang="en"> ...

  8. [Vue]组件——插槽:slot(匿名插槽,具名插槽)与slot-scope(作用域插槽)

    1.单个插槽 | 匿名插槽 1.1<navigation-link> 子组件定义为: <a v-bind:href="url" class="nav-l ...

  9. Vue组件之props,$emit与$on以及slot分发

    组件实例之间的作用域是孤立存在,要让它们之间的信息互通,就必须采用组件的通信方式  props用于父组件向子组件传达信息 1.静态方式 eg: <body> <div id=&quo ...

随机推荐

  1. P1058 车厢重组

    题目描述 在一个旧式的火车站旁边有一座桥,其桥面可以绕河中心的桥墩水平旋转.一个车站的职工发现桥的长度最多能容纳两节车厢,如果将桥旋转 \(180\) 度,则可以把相邻两节车厢的位置交换,用这种方法可 ...

  2. UWP IRandomAccessStream 与 Stream 互转

    本文告诉大家如何将 IRandomAccessStream 和 Stream 互转 如果在使用网络传输文件的时候,在 UWP 经常使用将 IRandomAccessStream 和 Stream 互转 ...

  3. Roslyn 使用 Target 替换占位符方式生成 nuget 打包

    本文告诉大家如何编写在编译过程修改打包文件 在项目文件的相同文件夹可以放一个 nuspec 用来告诉 VisualStudio 如何打包 现在尝试创建一个项目 NearjerbetearDeeyito ...

  4. 【HTML/CSS】BFC

    块格式化上下文(Block formatting contexts) BFC是什么? 是Web页面中盒模型布局的CSS渲染模式.它的定位体系属于常规文档流. 至少满足条件之一: float 的值不为  ...

  5. C#面试题整理(带答案)

    1.维护数据库的完整性.一致性.你喜欢用触发器还是自写业务逻辑?为什么? 答:尽可能用约束(包括CHECK.主键.唯一键.外键.非空字段)实现,这种方式的效率最好:其次用触发器,这种方式可以保证无论何 ...

  6. 【37.74%】【codeforces 725D】Contest Balloons

    time limit per test3 seconds memory limit per test256 megabytes inputstandard input outputstandard o ...

  7. "技术框架太多,多的眼花缭乱,如何在众多选择中找到自己的方向?

    "技术框架太多,多的眼花缭乱,如何在众多选择中找到自己的方向?",经常有人这么问我. 咱们从开源项目说起,可以从两个维度来对开源项目进行分类,一方面是编程语言,另一方面是应用领域. ...

  8. 【Linux】nl笔记

    nl命令在linux系统中用来计算文件中行号.nl 可以将输出的文件内容自动的加上行号!其默认的结果与 cat -n 有点不太一样, nl 可以将行号做比较多的显示设计,包括位数与是否自动补齐 0 等 ...

  9. Team Foundation Server 2015使用教程【4】:默认团队权限说明

  10. 使用PAC file结合ATS控制访问

    介绍:前面已经介绍了ATS的安装和PAC文件的写法格式,现在把nginx端口转发,pac file访问控制和ATS代理结合起来分别控制不同的机器访问不同URL权限的目的 效果如下 一.使用nginx端 ...