前端学习(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;客户机/服务…

java接口与集合_【总结】Java常用集合接口与集合类

目录常见集合接口概述CollectionMapCollection接口Map接口补充内容常见集合接口概述Java中包含许多集合接口。其中比较常见的主要是Collection接口和Map接口&#xff1a;1.1 Collection由单元素组成的集合。其比较常见的直接子接口是List、Set和Queue接口。表1.1 Collection接口…

Hexo自定义页面的方法

原文转自&#xff1a;http://refined-x.com/2017/07/10/Hexo%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%96%B9%E6%B3%95/ Hexo是静态页博客生成利器&#xff0c;同很多博主一样&#xff0c;前端路上原创技术博客也是使用Hexo生成并托管在Github Page上的&…

java 图形绘制_Java Graphics 图形绘制

Graphics类提供基本绘图方法&#xff0c;Graphics类提供基本的几何图形绘制方法&#xff0c;主要有&#xff1a;画线段、画矩形、画圆、画带颜色的图形、画椭圆、画圆弧、画多边形、画字符串等。画线段drawLinepublic abstract void drawLine(int x1,int y1,int x2,int y2)在此…

woodcut

http://www.lintcode.com/en/problem/wood-cut/# 二分答案&#xff0c;贪心验证&#xff0c;具有单调性 class Solution { public:/***param L: Given n pieces of wood with length L[i]*param k: An integer*return: The maximum length of the small pieces.*/int woodCut(v…

java web应用程序_如何构建Java Web 应用程序 - Spring Boot?

Spring Framework 是可以帮助 Java 开发人员创建企业级应用程序的开源解决方案。构建在该平台基础之上的较热门项目之一是 Spring Boot&#xff0c;它提供一种简化的方法来创建独立的 Java 应用程序。本教程将逐步讲解如何创建示例 Spring Boot 入门 Web 应用&#xff0c;并将其…

工作59:常见报错

常见报错解决 1. 页面显示没有数据 页面显示没有数据的时候&#xff08;三级联动&#xff09;&#xff0c;注意去mounted里面看一下&#xff0c;获取数据的方法如getAddress()&#xff1b;有没有执行&#xff0c;是否将数据渲染到了页面&#xff1b; 2.404 状态码 第一次&a…

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的命名就能看出来&…

关于jsp,javascript,php等语言

技术一jsp: java植入html技术二javascript(js)植入html技术三早期php植入html弱类型语言和强类型语言弱类型语言无法实现函数重载&#xff0c;没办法转载于:https://www.cnblogs.com/HangZhe/p/7188353.html

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;方便更直观的进…

工作63:await和anync

async function是异步函数没错&#xff0c;但是如果你中间并没有await关键字&#xff0c;那就和普通函数没有区别&#xff0c;当第一个await关键字出现后&#xff0c;其后面的内容可视为Promise.then的回调&#xff0c;但如果这个Promise在进入你这个await之前被reject的话&…