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" " ...
随机推荐
- 数据分析 - 美国金融科技公司Prosper的风险评分分析
数据分析 - 美国金融科技公司Prosper的风险评分分析 今年Reinhard Hsu觉得最有意思的事情,是参加了拍拍贷第二届魔镜杯互联网金融数据应用大赛.通过"富爸爸队",认识 ...
- git上传中的排除的配置文件， git实际的操作代码；
git上传中的排除的配置文件: git实际的操作 在主目录建立.gitignore文件并输入以下保存: *.class #package file *.war *.ear #kdiff3 ignore ...
- LeetCode题解之Binary Tree Right Side View
1.题目描述 2.问题分析 使用层序遍历 3.代码 vector<int> v; vector<int> rightSideView(TreeNode* root) { if ...
- ERROR 1044 (42000): Access denied for user 'root'@'localhost'
从供应商那边接手一个MySQL数据库(数据库版本为5.7.21 MySQL Community Server (GPL)),在创建账号时遇到了"ERROR 1044 (42000): Acc ...
- RAS非对称加密与数字证书数字签名
它用图片通俗易懂地解释了,"数字签名"(digital signature)和"数字证书"(digital certificate)到底是什么. 我对这些问题的 ...
- POST 400 的一次遭遇
使用Springboot开发接口的过程中,使用POST接收提交的数据. @PostMapping("/input") public void inputData(@RequestB ...
- 多文档界面的实现(DotNetBar的superTabControl)
private void FormMain_Load(object sender, EventArgs e) { superTabControl2.Tabs.Clear(); timer1.Start ...
- Linux内核线程kernel thread详解--Linux进程的管理与调度（十）
内核线程 为什么需要内核线程 Linux内核可以看作一个服务进程(管理软硬件资源,响应用户进程的种种合理以及不合理的请求). 内核需要多个执行流并行,为了防止可能的阻塞,支持多线程是必要的. 内核线程 ...
- Windows平台搭建-----C语言
上期我们已经进行Linux的平台搭建,今期我们就来搭建下我们最常用的.最适合初学者的一种方式,那就是搭建Windows平台开发环境,只需要两种工具即可,一个就是编辑器(编辑代码的工具),另一个就是编译 ...
- FCM算法的matlab程序2
FCM算法的matlab程序2 在“FCM算法的matlab程序”这篇文章中已经用matlab程序对iris数据库进行实现,并求解准确度.下面的程序是另一种方法,是最常用的方法:先初始化聚类中心,在进 ...