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" " ...
随机推荐
- 2015年6月6日，杨学明老师《IT技术人才管理角色转型与实践》专题培训在苏宁云商成功举办！
2015.6.6,在中国南京苏宁总部,研发资深顾问.资深讲师为苏宁易购IT事业部全体产品总监.研发总监进行了为期一天的<IT技术人才管理角色转型与实践>的内训服务. 杨学明老师分别从技术人 ...
- Java代码优化总结（持续更新）
1.对equals不熟 例子 if(user.get("s").equals("ss")){ //一堆代码 } 注:一旦前端页面传null值过来,就错了,nul ...
- c/c++ 图的创建(二维数组法）
c/c++ 图的创建(二维数组法) 图的概念 图由点和线组成 知道了图中有多少个点,和哪些点之间有线,就可以把一张图描绘出来 点之间的线,分有方向和无方向 创建图 创建图,实际就是创建出节点,和节点之 ...
- git 使用命令删除远程分支和本地分支
删除远程分支命令: git push origin :<远程分支名称> git push origin --delete <远程分支名称> 删除本地分支: git bran ...
- fedora 28/29 配置 C++ 环境
最近 使用C++ 开发 更换机器的时候,还要重新配置一下 gnu 工具链.于是简单进行了安装了一下: yum install gcc yum install gcc-c++ yum install g ...
- 老生常谈：Windows的7类安全漏洞
这是篇比较老的文章,但是现在翻出来发下,还是会让大家对Windows的安全漏洞有所了解.建议大家阅读<软媒原创:如何从根上保证电脑安全.不中毒>. 目前微软系列产品中,危害计算机安全的漏洞 ...
- 力扣算法题—050计算pow（x, n）
#include "000库函数.h" //使用折半算法 牛逼算法 class Solution { public: double myPow(double x, int n) { ...
- es6拼接字符串``
不需要任何的加号和引号,全部字符仅仅由一组``符号包裹即可,而放置动态数据或者变量即用${变量}方式即可, 看着是真的一目了然啊,最主要是终于可以摆脱被拼接字符支配的恐惧了,哈哈哈哈.
- node基础—process对象（管理进程）
process对象概述 process对象是一个全局对象,可以在任何地方都能访问到他,通过这个对象提供的属性和方法,使我们可以对当前运行的程序的进程进行访问和控制 process 对象是一个 glob ...
- Contest Setting 2018 ICPC Pacific Northwest Regional Contest dp
题目:https://vj.69fa.cn/12703be72f729288b4cced17e2501850?v=1552995458 dp这个题目网上说是dp+离散化这个题目要对这些数字先处理然后进 ...