java中emit的用法_vue中 关于$emit的用法

1、父组件可以使用 props 把数据传给子组件。

2、子组件可以使用 $emit 触发父组件的自定义事件。

vm.$emit( event, arg ) //触发当前实例上的事件

vm.$on( event, fn );//监听event事件后运行 fn；

例如：子组件：

父组件传给子组件的toCity:{{sendData}}

点击此处将‘大连’发射给父组件

export default {

name:'trainCity',

props:['sendData'], // 用来接收父组件传给子组件的数据

methods:{

select(val) {

let data = {

cityname: val

};

this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件

}

}

}

父组件：

父组件的toCity{{toCity}}

import TrainCity from "./train-city";

export default {

name:'index',

components: {TrainCity},

data () {

return {

toCity:"北京"

}

},

methods:{

updateCity(data){//触发子组件城市选择-选择城市的事件

this.toCity = data.cityname;//改变了父组件的值

console.log('toCity:'+this.toCity)

}

}

}

图二：点击之后的数据

详解Vue中watch的高级用法

我们通过实例代码给大家分享了Vue中watch的高级用法,对此知识点有需要的朋友可以跟着学习下. 假设有如下代码:

FullName: {{fullName} ...

vue 中 命名视图的用法

今天主要记录  vue中命名视图的用法 先奉上官网网址:https://router.vuejs.org/zh/guide/essentials/named-views.html 一般情况下,一个页面 ...

VUE中 $on, $emit, v-on三者关系

VUE中 $on, $emit, v-on三者关系 每个vue实例都实现了事件借口 使用$on(eventName)监听事件 使用$emit(eventName)触发事件 若把vue看成家庭(相当于一 ...

Vue中利用$emit实现子组件向父组件通信

Vue中利用$emit实现子组件向父组件通信 父组件

我是父组件

vue中watch的详细用法

在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法:

vue中watch的详细用法(转载)

在vue中,使用watch来响应数据的变化.watch的用法大致有三种.下面代码是watch的一种简单的用法:

vue中$ref的基本用法

1.使用在一般的标签上

vue中watch函数的用法

vue中watch函数: 不仅可以判断路由变化(上篇博客有介绍),还可以判断数据的变化 (1):首先写watch函数 (2):在data里定义值 (3):在methods里写方法 (4):使用值

vue中router-link的详细用法

官网文档地址:https://router.vuejs.org/zh/api/#to 今天项目突然有需求,让vue中的一个页面跳转到另一个页面 // 字符串

随机推荐

linux 防火墙设置

防火墙的基本操作命令: 查询防火墙状态:[root@localhost ~]# service iptables status 停止防火墙:[root@localhost ~]# ...

Androidz之Activity概要学习

Androidz之Activity概要学习 1.     Activity类概述 Activity(活动)是一个单独的.能获取焦点的,且能与用户交互的东西.所以我们通常在Activity类中的onCr ...

delphi 动态建立WebBrower

//Delphi动态建立WebBrowerunit Main;interfaceuses  Windows, Messages, SysUtils, Variants, Classes, Graphi ...

Spark Streaming揭秘 Day6 关于SparkStreaming Job的一些思考

Spark Streaming揭秘 Day6 关于SparkStreaming Job的一些思考 Job是SparkStreaming的重要基础,今天让我们深入,进行一些思考. Job是什么? 首先, ...

java synchronized内置锁的可重入性和分析总结

最近在读<>,在第二章中线程安全中降到线程锁的重进入(Reentrancy) 当一个线程请求其它的线程已经占有的锁时,请求线程将被阻塞.然而内部锁是可重 ...

JS和H5做一个音乐播放器，附带源码

http://mp.weixin.qq.com/s/KpXT9X46AMlUVXQvpHuXGQ 效果图: 实现的功能 1.首页 2.底部播放控件 3.播放页面 4.播放列表 5.排行榜 6.音乐搜索 ...

快速排序&lpar;QuickSort&rpar;

1.算法思想    快速排序是一种划分交换排序.它采用了一种分治的策略,通常称其为分治法(Divide-and-ConquerMethod). (1) 分治法的基本思想    分治法的基本思想是:将原 ...

&lbrack;STM32F103&rsqb;PWM输入捕获配置

l 初始化定时器和通道对应IO的时钟. l 初始化IO口,模式为输入: GPIO_Init(); GPIO_InitStructure.GPIO_Mode = GPIO_Mode_IPD; //PA0 ...

解决ubuntu系统中firefox无法播放网页版音乐播放器音乐

Reference: https://blog.csdn.net/h736131708/article/details/80775382 因为网页版的qq音乐或者网易云音乐都把音频换成了AAC格式,这 ...

Code Signal&lowbar;练习题&lowbar;alphabeticShift

Given a string, replace each its character by the next one in the English alphabet (z would be repla ...