Vue进阶（Bus/作用域slot/动态组件）
一、Vue非父子组件传值(Bus/总线/发布订阅模式/观察者模式)
我们在之前已经知道了父子传值。父组件传递过来了的值，在子组件通过props接受，然后就可以使用了。
也学过了隔代传值，均是通过props逐层传递实现。那么，兄弟节点之间怎么传值呢？ 那就是通过bus啦。
通过bus实现方式如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<child content='Dell'></child>
<child content='Lee'></child> </div> <script src="js/vue.js"></script>
<script>
//给每个Vue绑定一个bus属性，其实他是一个Vue实例
Vue.prototype.bus = new Vue() Vue.component('child',{
data:function() {
return {
//为了避免直接修改父组件传过来的值，把父组件的值来一份拷贝
msg:this.content
}
},
props:{
content:String
},
template:'<div @click="handleClick">{{msg}}</div>',
methods:{
handleClick:function(){
//子组件会向父组件触发change事件，同时把msg传过去
this.bus.$emit('change',this.msg)
}
},
//这个组件挂载的时候，会执行的一个函数
mounted:function(){
//通过bus监听change事件，当change事件触发的时候，进行操作
var this_ = this
this.bus.$on('change',function(message) {
console.log(message)
this_.msg=message
})
}
}) // 1. 创建Vue的实例
let vm = new Vue({
el: '#app', });
</script>
</body>
</html>
二、Vue中的作用域插槽
slot的作用域插槽使用场景：当我们希望将子组件中slot传过来的数据，在父组件中用不同方式渲染的时候，就需要使用作用域插槽。
注意:自 2.6.0 起有所更新。已废弃的使用 slot-scope 特性的语法在这里。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title> </head>
<body>
<div id="root">
<child>
<template v-slot="props"><!--定义一个插槽，该插槽必须放在template标签内-->
<li>{{props.value}}</li> //使用li方式进行渲染
</template>
</child>
<child>
<template v-slot="props">
<h1>{{props.value}}</h1><!--定义不同的渲染方式-->
</template>
</child>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component('child',{
data: function(){
return {
list:[1,2,3,4]
}
},
template: `<div>
<ul>
<slot v-for="value in list" :value=value>//使用slot占位
</slot>
</ul>
</div>`
}) var vm=new Vue({
el: '#root'
}) </script>
</body>
</html>
结果如下：
三、动态组件和v-once
1、 Vue自带了一个组件<componet></componet>，通过它绑定is属性，来动态切换组件的显示与否。
2、我们也可以设定v-once属性来对频繁切换的组件进行加速渲染，原理就是先让组件保存在内存当中，下次渲染时，直接获取；当然，这种场景一般可以使用v-show来应对频繁切换渲染的情况。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title> </head>
<body>
<div id="root">
<!--component :is='type'></component-->//vue中的动态组件，可以通过绑定is属性来判断加载哪个组件
<child-one v-if="type=='child-one'"></child-one>
//这里如果是频繁切换的情况下，我们可以直接使用v-show来加速页面的渲染
<child-two v-if="type=='child-two'"></child-two>
<button @click="handleClick">切换</button>
</div>
<script src='js/vue.js'></script>
<script>
Vue.component('child-one',{
//我们可以使用v-once来将这个组件先保存在内存当中，当切换的时候，直接从内存中获取即可，加快了页面的渲染速度
template: `<div v-once>child-one</div>`
}) Vue.component('child-two',{ template: `<div v-once>child-two</div>`
}) var vm=new Vue({
el: '#root',
data:{
type:'child-one'
},
methods:{
handleClick:function(){
this.type=this.type==='child-one'?'child-two':'child-one'
}
}
}) </script>
</body>
</html>
Vue进阶（Bus/作用域slot/动态组件）的更多相关文章
- Vue.js的组件(slot/动态组件等)、单文件组件、递归组件使用
一.组件 1> 组件命名方式有两种(注意:在DOM模板中只有kebab-case命名方法才生效): html中引用组件: <!-- 在DOM模板中,只有 kebab-case命名才生效 - ...
- Vue一个案例引发的动态组件与全局事件绑定总结
最近在自学 Vue 也了解了一些基本用法,也记录了一些笔记有兴趣的朋友可以去查看我的其他文章,技术这东西真的不能光靠看,看是没有的,你必须要动手实践,只有在实战项目中才能发现问题,才能发现我们没有掌握 ...
- Vue.js 2使用中的难点举例--子组件，slot, 动态组件，事件监听
一例打尽..:) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- 七、vue语法补充二（动态组件 & 异步组件、访问元素 & 组件、混入）
1..sync 修饰符 2.3.0+ 新增 vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定.类似于v-model的效果 例子: this.$ ...
- 组件基础（参数校验和动态组件、v-once）—Vue学习笔记
最最最后一点关于组件传值的问题. 提醒:本篇内容请使用Vue.js开发版!(附带完成的警告和提示) 1.组件的参数校验 父组件向子组件传值,子组件可以决定传值的一些限制. 比如,子组件指向接收Stri ...
- Vue一个案例引发的递归组件的使用
今天我们继续使用 Vue 的撸我们的实战项目,只有在实战中我们才会领悟更多,光纸上谈兵然并卵,继上篇我们的<Vue一个案例引发的动态组件与全局事件绑定总结> 之后,今天来聊一聊我们如何在项 ...
- 三、深入Vue组件——Vue插槽slot、动态组件
一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...
- Vue 组件4 动态组件
动态组件 通过使用保留的<component>元素,动态的绑定到它的is特性,我们让多个组件同时使用同一个挂载点,并动态切换: var vm = new Vue({ el: '#examp ...
- vue第十单元(动态组件 keep-alive（钩子函数） 递归组件（name） 组件命名约定)
第十单元(动态组件 keep-alive(钩子函数) 递归组件(name) 组件命名约定) #课程目标 熟练掌握动态组件的实现 掌握keep-alive缓存组件,以及相应的钩子函数 熟练掌握递归组件, ...
随机推荐
- VBA循环（十一）
当需要多次执行一段代码时,就可以使用循环语句. 一般来说,语句是按顺序执行的:函数中的第一个语句首先执行,然后是第二个,依此类推. 编程语言提供了各种控制结构,允许更复杂的执行路径. 循环语句允许多次 ...
- TypeScript入门一：配置TS工作环境
配置手动编译TS文件工作环境 配置webpack自动化打包编译工作环境(后面补充) 一.TypeScript入门学习引言 进入主题之前,首先说明这个系列的博客是我刚刚接触TypeScript的学习笔记 ...
- oracle trunc函数用法
转自:https://www.e-learn.cn/content/qita/699481 /**************日期********************/ select trunc(sy ...
- sql server split切割字符串
create FUNCTION [dbo].[dnt_split] ( @splitstring varchar(max), @separator CHAR() = ',' ) RETURNS @sp ...
- Lwip与底层的接口
Lwip有三套api,分别是: raw api:使用方法为使用回调函数,即先注册一个函数,当接受到数据之后调用这个函数.缺点是对于数据连续处理不好. Lwip api:把接收与处理放在一个线程里面.因 ...
- 2-Spark-1-性能调优-数据倾斜2-Join/Broadcast的使用场景
技术点:RDD的join操作可能产生数据倾斜,当两个RDD不是非常大的情况下,可以通过Broadcast的方式在reduce端进行类似(Join)的操作: broadcast是进程级别的,只读的. b ...
- java - day019 - 反射
网络程序,难点在线程 反射 reflect 实用 类对象 来执行反射操作 反射获得一个类的定义信息 反射创建对象 反射调用成员变量, 方法 方法 获得类对象的三种方式 A.class Class.fo ...
- MySQL服务器
---恢复内容开始--- mysql是基于C/S端的服务器软件 mysql服务端 -server端开启 -解析指令 -对文件夹.文件.数据的增删改查 mysql客户端 -连接S段 -发送指令(sql语 ...
- java TCP 通信:服务端与客服端
1.首先先来看下基于TCP协议Socket服务端和客户端的通信模型: Socket通信步骤:(简单分为4步) 1.建立服务端ServerSocket和客户端Socket 2.打开连接到Socket的输 ...
- 04-Dockerfile介绍与使用
什么是dockerfileDockerfile是由一系列命令和参数构成的脚本,这些命令用一基础镜像并最终创建一个新的镜像.1.对于开发人员:可以为开发团队提供一个完全一致的开发环境.2.对于测试人员: ...