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缓存组件,以及相应的钩子函数 熟练掌握递归组件, ...
随机推荐
- glance
第二篇glance— 镜像服务 一.glance介绍: Glance是Openstack项目中负责镜像管理的模块,其功能包括虚拟机镜像的查找.注册和检索等. Glance提供 ...
- axios拦截登陆过期请求多次
request.interceptors.response.use( response => { console.log(response.data.code) // console.log(r ...
- html+css+javascript网页制作技巧总结1
(一)div.元素居中中显示方法: 1.宽度要有实际值或百分比值 2.margin:0px auto; 文本内容居中显示的方法: 1.text-align:center; 2.line-height: ...
- day14-python之集合函数字符串格式化
1.集合 #!/usr/bin/env python # -*- coding:utf-8 -*- # s=set(['alex','alex','sb']) # print(s) # s=set(' ...
- python3之面向对象编程理解
面向对象主要有三个特征:封装,继承,多态度. 一.封装 定义类语 class Animal(): class为定义类的关键字,后面跟名字(): python命名规范建议:类一般首字母单词大写,属性变量 ...
- 【常用技巧】js开发的一些技巧
1.console.log的特殊用法: 添加%c特殊符号即可打印出样式 console.log("%c djsakiasjdkasjdkjas","font-size:6 ...
- Python函数Day6
一.内置函数 list() 将一个可迭代对象转化为列表 字典转为列表:会将所有键转化为列表 字符串转为列表:键每个字符转化为列表 s = 'abc' dic = {'a':1,'b':2,'c':3} ...
- django(模版)
官方文档:https://docs.djangoproject.com/en/1.11/ref/templates/language/ 常用语法 Django模板中只需要记两种特殊符号: {{ }} ...
- Java--8--新特性--Stream API
Stream API 提供了一种高效且易于使用的处理数据的方式,(java.util.stream.*) 他可以对数组,集合等做一些操作,最终产生一个新的流,原数据是不会发生改变的. “集合”讲的是数 ...
- idea的jdk版本问题
问题描述: 解决: 检查以上是否版本一致. 不行就再检查下面的: 如果上面的方法还是不行的话,就建议你改一下pom文件中的maven插件编译级别,可以通过搜索所有的pom.xml,1.6这个关键词,就 ...