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 ...
随机推荐
- web前端开发工程师工资多少
做web前端开发工程师工资高不高?下面千锋小编为大家分析一下:作为目前互联网行业中的主流技术,Web前端一直是占有重要的地位.尤其是近年来HTML5技术的突飞猛进,使Web前端技术有了更好的发展. ...
- 使用阿里云主机离线部署CDH步骤详解
一.Linux文件系统准备 1. 拍摄快照 登录阿里云控制台,拍摄快照,注意有几个关键点尽量拍摄快照,系统初始状态.CM环境准备完成.CM安装完成.CDH安装完成. 2. 挂载设备 三个主机都执行. ...
- Minicom串口工具安装及配置
Minicom串口工具安装及配置 1. 简述 嵌入式开发多采用串口线连接电脑进行开发及调试. 2 安装及配置串口工具(以Minicom为例) Tiny4412开发板提供的有RS232电平的DB9公头接 ...
- Ubuntu 上查看硬件信息命令
1.Mint 驱动程序管理器是由 Linux Mint 团队开发的一款系统工具软件,使得用户在Linux系统中可容易安装专有驱动,通过一个直观的界面.由于 Mint 驱动程序管理器具有独立性,它支持所 ...
- 《实战Nginx》读书笔记
最近今天读了一本书叫做<实战Nginx:取代Apache的高性能Web服务器>,看后对Nginx 了解了不少.但是还有很多地方不是很了解.不过此书可以作为一本参考手册来使用,里面的讲解很详 ...
- Srtuts2实现登录界面（不连接数据库）报错（一）
二月 28, 2014 11:32:02 下午 org.apache.catalina.core.AprLifecycleListener init 严重: An incompatible versi ...
- SOCKET 编程TCP/IP、UDP
TCP/IP 资源:http://download.csdn.net/detail/mao0514/9061265 server: #include<stdio.h> #include&l ...
- RTSP协议分析
RTSP 协议分析 1.概述: RTSP(Real Time Streaming Protocol),实时流传输协议,是TCP/IP协议体系中的一个应用层协议,由哥伦比亚大学.网景和RealNetw ...
- iBatis基础知识
iBatis简介: 特点:结构性好,小巧,容易上手 搭建环境: 1.创建java 项目 2.导入(3个)jar包:ibatis-2.3.0.667.jar,mysql驱动包,Junit测试包 3.配置 ...
- How I explained OOD to my wife(转)
How I explained OOD to my wife Learning Object Oriented Design principles through interesting conver ...