vue中$on与$emit的实际应用
$on常用于监听自定义事件，触发后可传入参数
//监听event1事件
vm.$on('event1',function(msg){
console.log(msg)
})
//触发event1自定义事件
vm.$emit('event1','参数')
需要注意的时，自定义事件必须绑定在实例上，否则无效。
应用一：传值可用于组件间的数据通信，如下例：（将A组件的数据a和B组件的数据b传入C组件中）
//A组件
var A={
template:"<div><h2>组件A</h2><input type='button' value='btnA' @click='send'></div>",
data(){
return {
a:"data A"
}
},
methods:{
send(){
Event.$emit("a-msg",this.a);
}
}
};
//B组件
var B={
template:"<div><h2>组件B</h2><input type='button' value='btnB' @click='send'></div>",
data(){
return {
b:"data B"
}
},
methods:{
send(){
Event.$emit("b-msg",this.b);
}
}
};
//C组件
var C={
template:"<div><h2>组件C</h2><h3>{{a}}</h3><h3>{{b}}</h3></div>",
data(){
return {
a:"",
b:""
}
},
mounted(){
var _this=this;
Event.$on("a-msg",function(str){
_this.a=str;
})
Event.$on("b-msg",function(str){
_this.b=str;
})
}
}
注册组件
new Vue({
el:"#box",
components:{
"com-a":A,
"com-b":B,
"com-c":C
}
})
应用一示例的全部代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="box">
<com-a></com-a>
<com-b></com-b>
<com-c></com-c>
</div> <script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var Event=new Vue();
var A={
template:"<div><h2>组件A</h2><input type='button' value='btnA' @click='send'></div>",
data(){
return {
a:"data A"
}
},
methods:{
send(){
Event.$emit("a-msg",this.a);
}
}
};
var B={
template:"<div><h2>组件B</h2><input type='button' value='btnB' @click='send'></div>",
data(){
return {
b:"data B"
}
},
methods:{
send(){
Event.$emit("b-msg",this.b);
}
}
};
var C={
template:"<div><h2>组件C</h2><h3>{{a}}</h3><h3>{{b}}</h3></div>",
data(){
return {
a:"",
b:""
}
},
mounted(){
var _this=this;
Event.$on("a-msg",function(str){
_this.a=str;
})
Event.$on("b-msg",function(str){
_this.b=str;
})
}
} new Vue({
el:"#box",
components:{
"com-a":A,
"com-b":B,
"com-c":C
}
})
</script>
</body>
</html>
应用二：子组件与父组件的通信
父组件代码：（父组件自定义changeTitle函数）
<template>
<section class="sear-box">
//将isShow数据传递给searchInput组件，并进行双向绑定，子组件数据更新后，父组件的数据也相应改变，从而改变相应数据驱动的视图，2.3.x版本中恢复sync的使用。
<searchInput :isShow.sync='listShow' :title='title'></searchInput>
<searchList v-show='listShow' @changeTitle='titleHandle'></searchList>
</section>
</template>
<script>
//搜索框
import searInput from './searInput'
//搜索推荐列表
import searList from './searList'
export default {
components: {
searchInput: searInput,
searchList: searList
},
data () {
return {
listShow: false,
title: ''
}
},
methods: {
//自定义事件的事件处理函数
titleHandle (title) {
this.title = title
}
}
}
</script>
子组件：
<template>
<section>
<ul class="sear-list">
<li v-for='item in data' :key='item.id' @click='listClickHandle(item.title)'>{{ item.title }}</li>
</ul>
</section>
</template>
<script>
let data = [
{title: 'html', id: 1},
{title: 'html+css', id: 2},
{title: 'html+css3', id: 3}
]
export default {
data () {
return {
data: data
}
},
methods: {
listClickHandle (title) {
//点击搜索推荐列表项时触发listClickHandle函数并触发自定义事件changeTitle
this.$emit('changeTitle', title)
}
}
}
</script>
应用三：更新数据
父组件同应用二；
子组件代码：
<template>
<section class="sear-con">
<input type="text" name="" class="sear-input" @click='clickHandle' v-model='title'><a href="#" class="sear-btn">search</a>
</section>
</template>
<script>
export default {
props: ['isShow', 'title'],
computed: {
initShow () {
return this.isShow
}
},
methods: {
clickHandle () {
console.log('click')
//点击搜索框时触发clickHandle函数并将isShow数据修改为!this.initShow
this.$emit('update:isShow', !this.initShow)
}
}
}
</script>
Demo的github地址https://github.com/pomelott/VueDemo
vue中$on与$emit的实际应用的更多相关文章
- 基于iscroll的better-scroll在vue中的使用
什么是 better-scroll better-scroll 是一个移动端滚动的解决方案,它是基于 iscroll 的重写,它和 iscroll 的主要区别在这里.better-scroll 也很强 ...
- vue.js $refs和$emit 父子组件交互
父调子 $refs (把父组件的数据传给子组件) <template> <div id="app"> <input type="butto ...
- [vue]vue双向绑定$on $emit sync-模态框
双向绑定实现($on $emit) 关于父子之间数据更新同步, 如果单向绑定, 子修改了,父却没有修改, 这种一般不符合规范 正常更新数据的套路是: 1. 子通知父更新数据 2. 子自动刷新获取最新数 ...
- 【前端vue开发】vue子调父 $emit (把子组件的数据传给父组件)
ps:App.vue 父组件 Hello.vue 子组件 <!--App.vue :--> <template> <div id="app"> ...
- better-scroll在vue中的应用
在我们日常的移动端项目开发中,处理滚动列表是再常见不过的需求了,以滴滴为例,可以是这样竖向滚动的列表,如图所示: 微信 —> 钱包—>滴滴出行”体验效果. 什么是 better-scrol ...
- Vue组件之props,$emit与$on以及slot分发
组件实例之间的作用域是孤立存在,要让它们之间的信息互通,就必须采用组件的通信方式 props用于父组件向子组件传达信息 1.静态方式 eg: <body> <div id=&quo ...
- antV G6流程图在Vue中的使用
最近我司项目中需要加入流程图制作功能,于是乎百度各种找可视化绘制拓扑图的轮子,大部分都是国外的,看文档太吃力,不过好在最终让我发现了AntV G6流程图图表库,最新版为2.0,不过编辑器在2.0版本还 ...
- vue中\$refs、\$emit、$on的使用场景
1.$emit的使用场景 子组件调用父组件的方法并传递数据注意:子组件标签中的时间也不区分大小写要用“-”隔开 子组件: <template> <button @click=&quo ...
- TypeScript基础以及在Vue中的应用
TypeScript推出已经很长时间了,在Angular项目中开发比较普遍,随着Vue 3.0的即将推出,TypeScript在Vue项目中使用也即将成为很大的趋势,笔者也是最近才开始研究如何在Vue ...
随机推荐
- 网站入住各大搜索引擎的seo优化技巧
最近在公司上班的时候做了一个工业物联网的项目,上层主管提出要求,让这个网站入住各大搜索引擎,也就是说在各大搜索引擎中输入与网站相关的关键字就能搜索到我们自己的网站.刚开始自己一脸懵逼,因为之前自己并没 ...
- Hibernate5环境搭建
1.导包 Hibernate开发包 数据库的驱动包 2.核心配置文件 核心配置文件(赋值到src下) 1.核心配置文件 对于hibernate的核心配置文件它有两种方式(选其中一种即可 ...
- Git 用户名和邮箱
用户名邮箱的作用 用户名和邮箱地址是本地git客户端的一个变量,不随git库而改变. 每次commit都会用用户名和邮箱纪录. github的contributions统计就是按邮箱来统计的. 查看用 ...
- 网络基础tcp/ip协议五
传输层的作用: ip层提供点到点的链接. 传输层提供端到端的链接. 传输层的协议: TCP: 传输控制协议可靠的,面向链接的协议,传输效率低. UDP: 用户数据报协议,不可靠,无连接的服务,传输效率 ...
- 【前端】JavaScript中prototype和__proto__的区别
转载请注明出处:http://www.cnblogs.com/shamoyuu/p/prototype.html 经常有小伙伴问我关于prototype和__proto__的问题,觉得有必要写一篇博客 ...
- freemarker中的split字符串分割
freemarker中的split字符串分割 1.简易说明 split分割:用来根据另外一个字符串的出现将原字符串分割成字符串序列 2.举例说明 <#--freemarker中的split字符串 ...
- JavaScript去除日期中的“-”
JavaScript去除日期中的"-" 1.说明 经常会出现这样的情况,页面的日期格式是:YYYY-MM-DD,而数据库中的日期格式是:YYYYMMDD,两者之间需要转换一下,方能 ...
- Linux 显示权限
Linux 显示权限 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ ls -lh 总用量 56K -rw-r--r-- 1 youhaidong youhai ...
- 将泛类型集合List类转换成DataTable
/// <summary> /// 将泛类型集合List类转换成DataTable /// </summary> /// <param name="list&q ...
- Java并发 线程池
线程池技术就是事先创建一批线程,这批线程被放入到一个池子里,在没有请求到达服务端时候,这些线程都是处于待命状态,当请求到达时候,程序会从线程池里取出一个线程,这个线程处理到达的请求,请求处理完毕,该线 ...