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" " ...
随机推荐
- tornado 初解
对于使用习惯Django的我来说,tornado实在是很简陋,没有那么多复杂的文件分类. 在tornado中,一个简单web只需要十几行简单的代码就OK了 import tornado.web imp ...
- 关于最新笔记本机型预装win8如何更换为win7的解决办法
关于最新笔记本机型预装win8如何更换为win7的解决办法 目前新出的很多机型出厂自带的都是win8系统,可能有些人用不习惯,想更换为win7系统,但是由于这些机型主板都采用UEFI这种接口(硬盘分区 ...
- apk公钥私钥用法
每个密钥都包含两个文件:一个是扩展名为 .x509.pem 的证书,另一个是扩展名为 .pk8 的私钥.私钥需要加以保密,并用于对 apk 包进行签名.密钥本身也可能受密码保护.相比之下,证书只包含公 ...
- 使用Visual Studio Team Services敏捷规划和项目组合管理（七）——流程定制
使用Visual Studio Team Services敏捷规划和项目组合管理(七)--流程定制 在Team Services中,可以通过流程定制工作追踪体验.流程定义了工作项跟踪系统的构建部分,以 ...
- 盒子模型、网页自动居中、float浮动与清除、横向两列布局
1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img in ...
- IE浏览器兼容性调整总结技巧
前言 最近项目做完,用户需要兼容IE,于是开展了兼容性的调整工作.边调整边想感叹IE真是个沙雕..特将我遇到的问题记录下来,以及记录我的解决办法,以下问题及解决办法,都是真实可用的,本人亲测~~ 一. ...
- MySQl ifnull()和substr()
SUBSTR(str,pos,len) substr用来截取字符串: str 被截取的字符串 pos 开始位置 len 长度 举个例子: substr('abc',1,2)='ab' IFNULL(e ...
- c/c++ 深拷贝
解决上一篇浅拷贝的问题 浅拷贝的问题根源是,类里有指针类型的成员变量,所以需要自己编写拷贝构造函数和重载=函数 #include <iostream> #include <strin ...
- PHP中判断变量是否存在的方式
isset()函数判断变量是否设置. thinkPHP中判断select查询时返回值是否为空 $object->isEmpty() empty():当变量存在,并且是一个非空非零的值时,返回 ...
- Tomcat配置自定义JAVA环境
Tomcat的bin目录下 在setclasspath.sh(Linux系统,Windows系统为setclasspath.bat)文件的开头添加: export JAVA_HOME=/usr/lib ...