文档章节

vue中$emit的用法

JamesView
 JamesView
发布于 07/21 18:32
字数 316
阅读 254
收藏 0

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>父组件的toCity{{toCity}}</div>
    <train-city @showCityName="updateCity" :sendData="toCity"></train-city>
<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>

图一:点击之前的数据

 

图二:点击之后的数据

本文转载自:https://blog.csdn.net/sllailcp/article/details/78595077

共有 人打赏支持
上一篇: js中的~符
下一篇: Fetch API(一)
JamesView
粉丝 7
博文 95
码字总数 20042
作品 0
海淀
前端工程师
私信 提问
07、Vue.js---Vue对象的实例方法和属性

Vue对象的实例属性和方法分为全局和局部实例属性和方法。全局和局部的区别在于调用者不同。 · 局部实例属性和方法: vm | this .$方法名或属性; · 全局实例熟悉和方法: Vue .方法名或属性...

秋季长青
07/18
0
0
vue非父子组件之间的传值--bus(总线/观察者模式)

vue中父子组件的传值很简单,父组件向子组件传值通过属性的方式 <div id="app"> <hello :content="content"></hello> </div> <script type="text/javascript"> /vue父组件通过属性向子组件传......

成功需要积累
05/29
0
0
前端框架Vue(8)——子父组件的传参通信

父子间的通信传值是 vue 中的一个重要的内容和掌握点。 *vue2.0 推荐使用 vuex,全局进行状态管理。(后面再讲) 首先讲一下遇到的 需求背景: 解释一下: 组件之间的关系: 1、子组件 login ...

docallen
2017/04/14
0
0
Vue2.0笔记——Vue常用实例属性,实例方法

实例属性 vm.$el vm.$data vm.options vm.$refs vm.$root vm.$el 该实例属性用于获取Vue实例使用的根DOM元素,即el选项所指的元素DOM vm.$data Vue 实例观察的数据对象。Vue 实例代理了对其 ...

逝岁月
04/19
0
0
vue-router中使用EventBus传值需要注意到的问题

最近负责开发一个视频相关的项目,要用到vue-router,同时涉及到一些共有状态管理,但是少量的状态又不想用vuex,于是用到了EventBus,一般来说, 我们用EventBus的步骤如下: 首先新建一个j...

大灰狼的小绵羊哥哥
08/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

PHP生成CSV之内部换行

当我们使用PHP将采集到的文件内容保存到csv文件时,往往需要将采集内容进行二次过滤处理才能得到需要的内容。比如网页中的换行符,空格符等等。 对于空格等处理起来都比较简单,这里我们单独...

豆花饭烧土豆
今天
2
0
使用 mjml 生成 thymeleaf 邮件框架模板

发邮件算是系统开发的一个基本需求了,不过搞邮件模板实在是件恶心事,估计搞过的同仁都有体会。 得支持多种客户端 支持响应式 疼彻心扉的 outlook 多数客户端只支持 inline 形式的 css 布局...

郁也风
今天
8
0
让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字

让哲学照亮我们的人生——读《医务工作者需要学点哲学》有感2600字: 作者:孙冬梅;以前读韩国前总统朴槿惠的著作《绝望锻炼了我》时,里面有一句话令我印象深刻,她说“在我最困难的时期,...

原创小博客
今天
4
0
JAVA-四元数类

public class Quaternion { private final double x0, x1, x2, x3; // 四元数构造函数 public Quaternion(double x0, double x1, double x2, double x3) { this.x0 = ......

Pulsar-V
今天
18
0
Xshell利用Xftp传输文件,使用pure-ftpd搭建ftp服务

Xftp传输文件 如果已经通过Xshell登录到服务器,此时可以使用快捷键ctrl+alt+f 打开Xftp并展示Xshell当前的目录,之后直接拖拽传输文件即可。 pure-ftpd搭建ftp服务 pure-ftpd要比vsftp简单,...

野雪球
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部