Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级
(四) 组件化高级
1.插槽(slot)的基本使用
A:基本使用: <slot></slot>
B:默认置:<slot><h1>中间可以放默认值</h1></slot>
C:如果有多个值,同时放入到组件进行替换时,一起作为替换元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--父组件模版-->
<div id="app">
<zzj1><button>按钮</button></zzj1> <!--组件1加个按钮-->
<zzj1>长安镖局</zzj1> <!--组件2加个长安镖局-->
<zzj1><h1>预留插槽后中间可以随便放</h1></zzj1> <!--组件3加个h1标签-->
<zzj1></zzj1> <!--组件4显示默认值--> </div>
<!--子组件模版 -->
<template id="zzjmb">
<div>
<h2>{{title}}</h2>
<!--预留插槽,以便扩展组件,组件中抽取共性,把不同的预留在插槽-->
<!--<slot></slot>-->
<slot><h1>中间可以放默认值</h1></slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// root根组件(父组件)
const app = new Vue({
el: '#app',
// 创建注册子组件
components: {
zzj1: {
template: '#zzjmb',
data() {
return {
title: '子组件data中的数据'
}
},
}
}
})
</script>
</body>
</html> 插槽(slot)的基本使用
插槽(slot)的基本使用
2.具名插槽(slot)的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--父组件模版-->
<div id="app">
<zzj1><button>按钮</button></zzj1> <!--替换默认插槽-->
<zzj1><button slot="left">替换左边</button></zzj1> <!--替换左边插槽-->
</div>
<!--子组件模版 -->
<template id="zzjmb">
<div>
<h2>{{title}}</h2>
<!--具名插槽-->
<slot name="left"><span>左边</span></slot>
<slot name="center"><span >中间</span></slot>
<slot name="right"><span>右边</span></slot>
<slot ><span>默认</span></slot>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// root根组件(父组件)
const app = new Vue({
el: '#app',
// 创建注册子组件
components: {
zzj1: {
template: '#zzjmb',
data() {
return {
title: '子组件data中的数据-具名插槽'
}
},
}
}
})
</script>
</body>
</html> 具名插槽(slot)的使用
具名插槽(slot)的使用
3.变量编译的作用域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--父组件模版-->
<div id="app">
<!--执行isshow会在当前模版中查找-->
<zzj1 v-show="isshow"></zzj1>
</div>
<!--子组件模版 -->
<template id="zzjmb">
<div>
<h2>{{title}}</h2>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// root根组件(父组件)
const app = new Vue({
el: '#app',
data: {
title:'我是父组件',
isshow:true
},
// 创建注册子组件
components: {
zzj1: {
template: '#zzjmb',
data() {
return {
title: '子组件data中的数据-编译的作用域',
isshow: false,
}
},
}
}
})
</script>
</body>
</html> 变量编译的作用域
变量编译的作用域
4.作用域插槽 (父组件替换插槽的标签,但是内容由子组件来提供)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body><!--作用域插槽==>父组件替换插槽的标签,但是内容由子组件来提供-->
<!--父组件模版-->
<div id="app">
<zzj1><span slot="left" >子组件中展示的格式:</span></zzj1> <!--替换左边具名插槽-->
<zzj1>
<!--使用插槽的数据外面可以是template标签,也可以是其它标签-->
<span slot="left">父组件中展示的格式后面有"-":</span>
<template slot-scope="fyuyan1"> <!--用slot-scope接收子组件传的数据,后面变量名自定义-->
<span v-for="i in fyuyan1.data">{{i}} - </span><!--用变量名.data来使用数据-->
</template>
</zzj1>
<zzj1>
<span slot="left">父组件中展示的格式去掉后面的"-":</span>
<div slot-scope="fyuyan2">
<span>{{fyuyan2.data.join('-')}}</span><!--用join函数来展示-->
</div>
</zzj1>
</div>
<!--子组件模版 -->
<template id="zzjmb">
<div>
<ul>
<slot name="left"><span>左边</span></slot>
<slot :data="yuyan"><li v-for="i in yuyan">{{i}}</li></slot><!--自定义绑定名data,来绑定发射子组件的数据-->
</ul>
</div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {},
components: {
zzj1: {
template: '#zzjmb',
data() {
return {
yuyan:['python','go','vue'],
title: '子组件data中的数据-编译的作用域',
}
},
}
}
})
</script>
</body>
</html>
作用域插槽
Vue学习笔记-Vue.js-2.X 学习(四)
Vue学习笔记-Vue.js-2.X 学习(三)===>组件化高级的更多相关文章
- Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明-Babel)
五 Vue学习-vue-cli脚手架学习(创建只选一个选项:Babel) 1. 项目目录说明 node_modules : 包管理文件夹 public : 静态资源 src : 源代码 gitign ...
- Vue学习笔记-Vue.js-2.X 学习(四)===>脚手架Vue-CLI(基本工作和创建)
(五) 脚手架Vue-CLI 一 Vue-CLI前提(nodejs和webpack) 二 Vue学习-nodejs按装配置,Node.js 就是运行在服务端的 JavaScript. 1. 去nod ...
- Vue学习笔记-Vue.js-2.X 学习(二)===>组件化开发
===重点重点开始 ========================== (三) 组件化开发 1.创建组件构造器: Vue.extends() 2.注册组件: Vue.component() 3.使用 ...
- Vue学习笔记-Vue.js-2.X 学习(一)===>基本知识学习
一 使用环境: windows 7 64位操作系统 二 IDE:VSCode/PyCharm 三 Vue.js官网: https://cn.vuejs.org/ 四 下载安装引用 方式1:直接 ...
- Vue学习笔记-Vue.js-2.X 学习(五)===>脚手架Vue-CLI(PyCharm)
Vue项目在pycharm中配置 退出运行: ctrl+c Vue学习笔记-Vue.js-2.X 学习(六)===>脚手架Vue-CLI(项目说明)
- 【学习笔记】jQuery的基础学习
[学习笔记]jQuery的基础学习 新建 模板 小书匠 什么是jQuery对象? jQuery 对象就是通过jQuery包装DOM对象后产生的对象.jQuery 对象是 jQuery 独有的. 如果 ...
- 【学习笔记】JavaScript的基础学习
[学习笔记]JavaScript的基础学习 一 变量 1 变量命名规则 Camel 标记法 首字母是小写的,接下来的字母都以大写字符开头.例如: var myTestValue = 0, mySeco ...
- 《Java学习笔记(第8版)》学习指导
<Java学习笔记(第8版)>学习指导 目录 图书简况 学习指导 第一章 Java平台概论 第二章 从JDK到IDE 第三章 基础语法 第四章 认识对象 第五章 对象封装 第六章 继承与多 ...
- 20145213《Java程序设计学习笔记》第六周学习总结
20145213<Java程序设计学习笔记>第六周学习总结 说在前面的话 上篇博客中娄老师指出我因为数据结构基础薄弱,才导致对第九章内容浅尝遏止地认知.在这里我还要自我批评一下,其实我事后 ...
随机推荐
- Docker容器管理平台Rancher高可用部署——看这篇就够了
记得刚接触Rancher时,看了官方文档云里雾里,跟着官网文档部署了高可用Rancher,发现不管怎么折腾都无法部署成功(相信已尝试的朋友也有类似的感觉),今天腾出空来写个总结,给看到的朋友留个参考( ...
- Hive之insert和insert overwrite
1. hive 表及数据准备 建表,并插入初始数据.向表中插入 hive> use test; hive> create table kwang_test (id int, name st ...
- 2018 ACM-ICPC 焦作区域赛 E Resistors in Parallel
Resistors in Parallel Gym - 102028E 吐槽一下,网上搜索的题解一上来都是找规律,对于我这种对数论不敏感的人来说,看这种题解太难受了,找规律不失为一种好做法,但是题解仅 ...
- Codeforces Global Round 11 C. The Hard Work of Paparazzi（dp/最长上升子序列）
题目链接:https://codeforces.com/contest/1427/problem/C 题意 \(r\) 行与 \(r\) 列相交形成了 \(r \times r\) 个点,初始时刻记者 ...
- 线段树扫描线（一、Atlantis HDU - 1542（覆盖面积） 二、覆盖的面积 HDU - 1255（重叠两次的面积））
扫描线求周长: hdu1828 Picture(线段树+扫描线+矩形周长) 参考链接:https://blog.csdn.net/konghhhhh/java/article/details/7823 ...
- HDU - 2159 dp
题目: 最近xhd正在玩一款叫做FATE的游戏,为了得到极品装备,xhd在不停的杀怪做任务.久而久之xhd开始对杀怪产生的厌恶感,但又不得不通过杀怪来升完这最后一级.现在的问题是,xhd升掉最后一级还 ...
- vlc音视频开发（一）环境搭建（qt篇)
来源:微信公众号「编程学习基地」 目录 简介 qt配置vlc环境 simple_libvlc_qt_player 项目地址 简介 VLC 是一款自由.开源的跨平台多媒体播放器及框架,可播放大多数多媒体 ...
- 四、Jmeter 集合点（实际场景应用）
一.jmeter集合点的作用域及作用范围 先明确一些概念:1)定时器是在每个sampler(采样器)之前执行的,而不是之后: 是的,你没有看错,不管这个定时器的位置放在sampler之后,还是之下,它 ...
- K8S(02)管理核心资源的三种基本方法
系列文章说明 本系列文章,可以基本算是 老男孩2019年王硕的K8S周末班课程 笔记,根据视频来看本笔记最好,否则有些地方会看不明白 需要视频可以联系我 管理k8s核心资源的三种基本方法: 目录 系列 ...
- CentOS7系统时间和硬件时间不同步问题
CentOS7系统中有两个时间:系统时间 和 硬件时间 我们常用命令 date 会输出系统时间,用 date 命令修改的也是系统时间 硬件时间是写入到 BIOS 中的时间,用 hwclock -r 命 ...