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 ...
随机推荐
- python file文件操作--内置对象open
说明: 1. 函数功能打开一个文件,返回一个文件读写对象,然后可以对文件进行相应读写操作. 2. file参数表示的需要打开文件的相对路径(当前工作目录)或者一个绝对路径,当传入路径不存在此文件会报错 ...
- Hadoop编译方法
伪分布式: hadoop-env.sh core-site.xml hdfs-site.xml mapred-site.xml 1.在hadoop官网下载hadoop的源码(同步跟踪最新源代码) mv ...
- eclipse快捷键及设置
1.Eclipse设置新建菜单初始项 windows-->Perspective-->Customize Perspective--> 2.Eclipse快捷键 1. ctrl+sh ...
- grub2与grub区别
关于版本: GRUB2 使之版本号为1.98之后的grub:GRUB legacy(版本为0.97)是指GRUB,而非GRUB2,grub是指 grub1.97 和以前的,grub 2 指的是 gru ...
- vxworks下文件读写示例
dev 1.create file on floopy disk and write contents: -> pdev=fdDevCreate(0,0,0,0) /* A:,1.44M ...
- WIN7 嵌入式系统安装教程 Windows Embedded Standard 2011 安装
轻松构建你的第一个 Windows Embedded Standard 2011 镜像.通过本文你可以快速掌握如何使用Windows Embedded Standard 2011 CTP1 来构建一个 ...
- freemarker报错之九
1.错误描述 五月 30, 2014 11:52:04 下午 freemarker.log.JDK14LoggerFactory$JDK14Logger error 严重: Template proc ...
- Django学习-7-ORM操作
select * from tb where id > 1 # 对应关系 models.tb.objects.filter(1id__gt=) models.tb. ...
- SDP（10）：文本式大数据运算环境-MongoDB-Engine功能设计
为了让前面规划的互联网+数据平台能有效对电子商务数据进行管理及实现大数据统计功能,必须在平台上再增加一个MongDB-Engine:数据平台用户通过传入一种Context来指示MongoDB-Engi ...
- ASP.NET CORE入门之读取Json配置文件
首先新建一.net core控制台项目,命名为jsonReader 然后选中引用,选择NuGet包管理器,点击浏览引入mircosoft.aspnetcore.all并安装 选中解决方案,填加,新建项 ...