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" " ...
随机推荐
- python 爬虫爬取内容时， \xa0 、 \u3000 的含义
最近用 scrapy 爬某网站,发现拿到的内容里面含有 \xa0 . \u3000 这样的字符,起初还以为是编码不对,搜了一下才知道是见识太少 233 . \xa0 是不间断空白符 我们通常所用的 ...
- git 入门教程之远程仓库
远程仓库 如果说本地仓库已经足够个人进行版本控制了,那么远程仓库则使多人合作开发成为可能. 如果你只是打算自己使用git,你的工作内容不需要发布给其他人看,那就用不到远程仓库的概念. git 是分布式 ...
- 用C++对C++语法格式进行分析
前言 最近C++项目需要用到脚本,这就关系到如何绑定对象到脚本运行环境.因使用到多套脚本语言,所以现有的绑定技术,都不能满足需求.所以只能寻求解析C++的头文件,再根据描述进行绑定.起初发现boost ...
- mysql之系统默认数据库
相关内容: 系统默认数据库information_schema,performance_schema,mysql,test 的意义 首发时间:2018-02-23 17:10 安装mysql完成后, ...
- selenium.common.exceptions.WebDriverException: Message: 'chromedriver' executable needs to be in PATH.
解决办法: 把chromedriver exe文件放到python scripts目录下
- 报错org.apache.hadoop.mapreduce.lib.input.FileSplit cannot be cast to org.apache.hadoop.mapred.FileSplit
报错 java.lang.Exception: java.lang.ClassCastException: org.apache.hadoop.mapreduce.lib.input.FileSpli ...
- NoSQL与MongoDB介绍
写在前面 本文是由一次演讲整理出来的,文中大部分资料来源于网络,感谢Wikipedia,Google和MongoDB官网.文中使用的MongoDB版本为1.2.4. What is NoSQL NoS ...
- 修改linux 默认SHELL
首先你得查看可以用的shell: 1.命令:chsh -l ,结果如下: /bin/sh/bin/bash/sbin/nologin/usr/bin/sh/usr/bin/bash/usr/sbin/ ...
- shell 关于路径查询显示pwd
获取根目录:dirname $0 cd到根目录:cd `dirname $0` 获取当前目录:pwd 因此,要获取当前目录应该是: cd `dirname $` && pwd 或者 $ ...
- css滚动条样式自定义
很简单的几行代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...