Vue-插槽学习
<!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">
<child1>
<header slot='header'>插槽header</header>
<footer slot='footer'>插槽footer</footer>
</child1>
<hr/>
<!-- 当我们使用 <child2> 组件的时候，我们可以选择为text定义一个不一样的 <template> 作为替代方案，
并且可以通过 slot-scope 特性从子组件获取数据： -->
<child2>
<template slot-scope="slotProps">
<p>第1个child2组件text是h1</p>
<h1>{{slotProps.text}}</h1>
</template>
</child2>
<child2>
<template slot-scope="slotProps">
<p>第2个child2组件text是h2</p>
<h2>{{slotProps.text}}</h2>
</template>
</child2>
</div>
</body>
<script type="text/javascript" src="./vue.js"></script>
<script>
Vue.prototype.bus=new Vue();
//具名插槽
Vue.component('child1',{
template:`
<div>
<slot name='header'></slot>
<p>child1内容</p>
<slot name='footer'></slot>
</div>
`,
})
//作用域插槽
//使用场景：我们希望每个child2组件都有可复用数据text，但是渲染出第东西又不太一样。
Vue.component('child2',{
data:function(){
return{
text:'子组件数据'
}
},
template:`
<div>
<p>child2内容</p>
<slot :text=text></slot>
</div>
`,
})
var app=new Vue({
el:'#app',
})
</script>
</html>
Vue-插槽学习的更多相关文章
- 学习笔记：Vue——插槽
关于Vue插槽,只用过最简单的语法,现在完整地走一遍官方文档说明,并且探索更多用法. 01.如果组件中没有包含一个<slot>元素,则该组件起始标签和结束标签之间的任何内容都会被抛弃. 0 ...
- Vue 插槽详解
Vue插槽,是学习vue中必不可少的一节,当初刚接触vue的时候,对这些掌握的一知半解,特别是作用域插槽一直没明白. 后面越来越发现插槽的好用. 分享一下插槽的一些知识吧. 分一下几点: 1.插槽内可 ...
- vue.js学习记录
vue.js学习记录 文章已同步我的github笔记https://github.com/ymblog/blog,欢迎大家加star~~ vue实例 生命周期 beforeCreate:不能访问thi ...
- vue入门学习（基础篇）
vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- Vue插槽：（2.6.0以后版本弃用slot和slot-scope，改用v-slot)
关于Vue插槽的概念,大家可以从vue官网的api查看,我是看到网站的对于初接触 这个要概念的人来说不是很清楚,我来贴下原码,就比较直观了 贴下原码: 具名插槽:v-slot:header Html: ...
- vue.js学习资料
vue.js学习VuejsAPI教程 https://vuejs.org.cn/guide/Vuejs自己的构建工具 http://www.jianshu.com/p/f8e21d87a572如何用v ...
- 在进行vue的学习，项目中需要引入bootstrap、jquery的步骤。
在进行vue的学习,项目中需要引入bootstrap.jquery的步骤. 一.引入jQuery 在当前项目的目录下(就是package.json),运行命令 cnpm install jquery ...
- Vue.js学习笔记：在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
随机推荐
- 性能优化7--App瘦身
1. 前言 如果你对App优化比较敏感,那么Apk安装包的大小就一定不会忽视.关于瘦身的原因,大概有以下几个方面: 对于用户来说,在功能差别不大的前提下,更小的Apk大小意味更少的流量消耗,也意味着更 ...
- LRU(最近最少使用淘汰算法)基本实现
LRU(Least Recently Used) 出发点:在页式存储管理中,如果一页很长时间未被访问,则它在最近一段时间内也不会被访问,即时间局部性,那我们就把它调出(置换出)内存. 为了实现LRU ...
- git 入门教程之github 教程
github 教程 github 是一个基于 git 的代码托管平台,是平时工作学习的好帮手,学会如何用好 github 网站能够帮助我们更好分享代码或者与其他开发人员合作. 注册 github 账号 ...
- 这几天上海移动网络可以直接打开 Google Play 了
这几天上海移动网络可以直接打开 Google Play (谷歌应用商店)了. 速度还不错.基本无延迟. 想当初,为了防止国内应用市场里的木马或恶意软件,想从 Google Play 应用市场下载,折腾 ...
- 关于PID的如何修改的FAQ
1.如何查询支付宝账号对应的PID: 2．意外绑错或者想修改PID流程: (1)和业务联系拿到商家平台支付宝变更协议书填写(模版如下,可在附件中下载) 致:杭州银盒宝成科技有限公司 本人因 ...
- Process 0:0:0 (0x1ffc) Worker 0x00000001E580A1A0 appears to be non-yielding on Scheduler 3. Thread creation time: 13153975602106.
现场报错如下: Process 0:0:0 (0x1ffc) Worker 0x00000001E580A1A0 appears to be non-yielding on Scheduler 3. ...
- 思科4506E做ehterchannel故障排查
思科4506E做ehterchannel故障排查 转载于:https://blog.51cto.com/eric1026/1910912 一.故障描述 某客户有两台4506E汇聚交换机,需要做ethe ...
- Hibernate 5 入门指南-基于Envers
首先创建\META-INF\persistence.xml配置文件并做简单的配置 <persistence xmlns="http://java.sun.com/xml/ns/pers ...
- MyBatis：参数传递 [转]
一.单个参数: public List<XXBean> getXXBeanList(String xxCode); <select id="getXXXBeanList&q ...
- 制作U盘启动-----计算机经验
这期呢我就先不打算写关于C的文章,这次就先给大家写几篇关于电脑系统安装的计算机经验篇.希望各位接下来看了我几期的经验文章,你们也能在电脑系统报销之时能够让其满血复活. 制作U盘启动 下载制作U盘启动的 ...