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 ...
随机推荐
- app后端session共享问题
在分布式中,session如何共享,用户登陆要解决的问题如下图所示,通过nignx请求转发,到不同的应用模块中,需要判断用户有没有登陆验证通过,问题又来了,app的移动端不像浏览器,没有cookie, ...
- Spark SQL 1.3测试
Spark SQL 1.3 参考官方文档:Spark SQL and DataFrame Guide 概览介绍参考:平易近人.兼容并蓄——Spark SQL 1.3.0概览 DataFrame提供了一 ...
- 转 Caffe学习系列(5)：其它常用层及参数
本文讲解一些其它的常用层,包括:softmax_loss层,Inner Product层,accuracy层,reshape层和dropout层及其它们的参数配置. 1.softmax-loss so ...
- 定义一个Matrix类，实现矩阵的加法和乘法
#include<iostream> using namespace std; class Matrix { int row;//矩阵的行 int col;//矩阵的列 int **a;/ ...
- php中静态变量和静态方法。
在php类的内部当使用static进行修饰了类的属性或者方法,则改属性或者方法被成为类的静态属性或者静态访问, 静态属性和非静态属性的区别 php官方的解释 声明类成员或方法为static,就可以不实 ...
- Linux开发-makefile
makefile 介绍 make命令执行时,需要一个 makefile 文件,以告诉make命令如何去编译和链接程序. 首先,我们用一个示例来说明makefile的书写规则.以便给大家一个感性认识.这 ...
- EF Core下利用Mysql进行数据存储在并发访问下的数据同步问题
小故事 在开始讲这篇文章之前,我们来说一个小故事,纯素虚构(真实的存钱逻辑并非如此) 小刘发工资后,赶忙拿着现金去银行,准备把钱存起来,而与此同时,小刘的老婆刘嫂知道小刘的品性,知道他发工资的日子,也 ...
- 启动就加载（一）----注解方式实现的。static项目启动的时候就加载进来（一般用于常用参数）
一,案例 1.1,图片分析 1.2,代码 1.2.1,编写加载系统参数的servlet public class SysInitServlet extends HttpServlet { public ...
- 小程序for循环中通过index实现单个点击事件
<!--xml--> <view class='content3-list' wx:for="{{listItems}}" > <view class ...
- jsp学习笔记之：4种基本语法
一. jsp注释:<%-- js注释 --%> 二. jsp声明: <%! public int count; public String test(){return "j ...