前端学习(2486):$emit

1、父组件可以使用 props 把数据传给子组件。
2、子组件可以使用 $emit 触发父组件的自定义事件。

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

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

例如:子组件:

复制代码
<template><div class="train-city"><h3>父组件传给子组件的toCity:{{sendData}}</h3> <br/><button @click='select(`大连`)'>点击此处将‘大连’发射给父组件</button></div>
</template>
<script>export default {name:'trainCity',props:['sendData'], // 用来接收父组件传给子组件的数据methods:{select(val) {let data = {cityname: val};this.$emit('showCityName',data);//select事件触发后,自动触发showCityName事件}}}
</script>
复制代码

 

父组件:

复制代码
<template><div><div>父组件的toCity{{toCity}}</div><train-city @showCityName="updateCity" :sendData="toCity"></train-city></div>
<template>
<script>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)}}}
</script>
复制代码

 

图一:点击之前的数据

 

图二:点击之后的数据

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/416405.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

葡萄城报表介绍:B/S 报表软件

葡萄城报表介绍&#xff1a;B/S 报表软件 B/S 报表软件定义 B/S&#xff08;Browser/Server&#xff0c;浏览器/服务器模式&#xff09;也称 B/S 结构&#xff0c;是 WEB 兴起后的一种网络结构模式。B/S 模式是由最开始的 C/S&#xff08;Client/Server&#xff0c;客户机/服务…

Python基础【day02】:元组和购物车练习的知识点

一、元组 元组其实跟列表差不多&#xff0c;也是存一组数&#xff0c;只不是它一旦创建&#xff0c;便不能再修改&#xff0c;所以又叫只读列表 用途&#xff1a;一般情况下用于自己写的程序能存下数据&#xff0c;但是又希望这些数据不会被改变&#xff0c;比如&#xff1a;数…

python库封装_使用SIP对C库进行Python封装

Python中使用C/C模块有许多工具&#xff0c;大名鼎鼎的有SWIG(英文意思为&#xff1a;豪饮)、SIP(英文意思为&#xff1a;啜饮&#xff0c;小口的喝)&#xff0c;还有 boost.python等。其中SIP是从SWIG发展而来&#xff0c;专为Python调用C/C模块使用的(看SIP的命名就能看出来&…

python最简易入门_零基础入门python,用最简单的方式即可入门python,没有那么复杂...

python已经开始被越来越多的人喜欢&#xff0c;其中有很多是从未学习过编程的人&#xff0c;那么&#xff0c;如果是从零开始学python的话&#xff0c;会很难吗&#xff1f;其实从零开始学python并不会很难&#xff0c;最简单的方法&#xff0c;往往最有效果&#xff0c;无论你…

hibernate07--关联映射

单向的一对多关联 创建对应的实体类以及映射文件 package cn.bdqn.bean; /*** * author 小豆腐*街道对应的实体类**单向的多对一关联*/ public class Street {private Integer id;private String name;//多个街道 属于 一个区县private District district; //对应的区县p…

java 常用流_Java流类图结构: 流的概念和作用流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象。即数据在两设备间的传输称为流,流的本质是数据传输,根据数...

Java流类图结构&#xff1a;流的概念和作用流是一组有顺序的&#xff0c;有起点和终点的字节集合&#xff0c;是对数据传输的总称或抽象。即数据在两设备间的传输称为流&#xff0c;流的本质是数据传输&#xff0c;根据数据传输特性将流抽象为各种类&#xff0c;方便更直观的进…

Java编写五线谱上的音符_干货| 认识五线谱上的音符!

原标题&#xff1a;干货| 认识五线谱上的音符&#xff01;前几周&#xff0c;给友友们分享了节奏学习小技巧……学的好不好可以自我检测一下&#xff1a;如果你最近说话都是这样&#xff1a;最近 啊 | 本渣 被刷 | 屏 - |大家 都 | 玩起 节奏 |不就 追热 | 点 么 |谁 . 不 | 会…

java实现抽奖游戏_Java实现游戏抽奖算法

常用抽奖算法对比基础的游戏抽奖算法通常要求实现在指定奖品的集合中&#xff0c;每个奖品根据对对应概率进行抽取。个人了解的主要有以下几中抽奖算法&#xff1a;随机数一一对应算法思想这种算法思想最为简单。将n个奖品编号0 - N-1&#xff0c;其中各类奖品的概率通过其数量…

java获取keyvault_ARM Template 结合key vault存储机密信息 (一)

前两篇讲到了terraform&#xff0c;作为跨平台的IAC工具绝对是没话说的&#xff0c;很非常好用&#xff0c;今天再讲回Azure原生的ARM Template&#xff0c;ARM Template好处就是作为微软的亲儿子&#xff0c;兼容性啥的绝对没话说&#xff0c;但是JSON对于非开发者来说实在用着…

从多级延迟触发器到边沿检测

本文记录一下关于延迟触发器链与它的常用用法&#xff08;即边沿检测。多级延迟的触发器应该是比较常用的&#xff0c;当我们需要对信号信号进行延时&#xff0c;这个时候我们就用到了延迟触发器链。下面就来记录一下吧。 一、多级延迟触发器&#xff08;或延迟触发器链&#x…