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缓存组件,以及相应的钩子函数 熟练掌握递归组件, ...
随机推荐
- Node.js 实战（一）之—优化汇总
Express 页面缓存 app.set("cache view",true); --设置页面缓存 开发模式下博主建议不要这么做,因为开发中我们会频繁的对页面的样式.js等进行修改 ...
- python渗透库大集合
l Scapy:一款强大的交互式数据报分析工具,可用作发送.嗅探.解析和伪造网络数据包. l pypcap.Pcapy和pylibpcap:配合libpcap一起使用的数据包捕获模块 l libdne ...
- sysfs和kobject
sysfs文件系统: sysfs是2.6内核的一个特性,它允许内核代码经由一个in-memory的文件系统把信息出报(export)到用户进程中. 在设备模型中,sysfs文件系统用来表示设备的结构. ...
- string 数组转 int 数组
用法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 //字符串数组(源数组) string[] sNums = new[] {"1", "2" ...
- 一语道破Java 11的ZGC为何如此高效
GC是大部分现代语言内置的特性,Java 11 新加入的ZGC号称可以达到10ms 以下的 GC 停顿,本文作者对这一新功能进行了深入解析.同时还对还对这一新功能带来的其他可能性做了展望.ZGC是否可 ...
- JAVA笔记整理（二），下载安装JDK
Windows平台 1.登录Oracle官方网站(http://www.oracle.com/index.html),找到下载 2.选择要下载的版本,点击JDK DOWNLOAD 3.下载文件,先勾选 ...
- Django中使用geetest验证
一.geetest的使用方法 首先需要在setting中配置好文件 GEE_TEST = { "gee_test_access_id": "37ca5631edd1e88 ...
- arduino之16*16点阵庆祝祖国70周年
之前电脑上存了很多自己写的关于arduino的有趣的小demo,因为重装了系统,不小心误删了所有的文件(气的半死),所以现在准备一有空就重写一下之前写过的东东,顺带再温习一次,这次总不能再删了吧,嘿嘿 ...
- C#解析多层Json数据
[事件回顾] 今天在做一个小项目的时候,想获取一下位置,IP地址,然后随便在网上找了一个api调用 https://apis.map.qq.com/ws/location/v1/ip 数据如下: 如果 ...
- sql网址
w3school版 https://www.w3school.com.cn/sql/index.asp 菜鸟教程版 https://www.runoob.com/sql/sql-tutorial.ht ...