vue2.x 父组件监听子组件事件并传回信息的方法

本文介绍了vue2.x 父组件监听子组件事件并传回信息,分享给大家,希望此文章对各位有所帮助

利用vm.$emit

1、在父组件中引用子组件

<child @from-child-msg="listenChildMsg"></child >

2、子组件中使用$emit发送事件

this.$emit('from-child-msg', '这是子组件传递的消息');

demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }
    input, select {
      height: 30px;
    }
  </style>
</head>
<body>
  <div id="app">
    <child value="name" @msg-from-child="getMsgFromChild"></child>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script>
  <script>
    Vue.component('child', {
      data: function () {
        return {
          val: this.value
        }
      },
      props: ['value'],
      methods: {
        handleClick () {
          this.$emit('msg-from-child', this.val)
        }
      },
      template: `
        <div><input type="text" v-model="val"><button type="button" @click="handleClick">确定</button></div>
      `
    })
    new Vue ({
      el: '#app',
      data: {

      },
      methods: {
        getMsgFromChild (v) {
          alert('msg: ' + v)
        }
      }
    })
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2017-07-16

详解vuex 中的 state 在组件中如何监听

前言 不知道大家有没有遇到过这样一种情况? vuex中的state会在某一个组建中使用,而这个状态的初始化是通过异步加载完成的.组件在渲染过程中,获取的state状态为空.也就是说组件在异步完成之前就已经完成渲染了,导致组件的数据没有来得及渲染. 问题举例 举例说明如下: // topo.vue created() { this.getUserAndSysIcons(); }, methods: { getUserAndSysIcons() { const self = this; // 用户图

vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法

上一篇文章介绍了vuejs实现的简单分页,如果我有几个页面都需要有分页效果,不可能每个页面都去复制一下这段代码吧,意思是封装一下,变成通用的组件. 首先使用基础 Vue 构造器,创建一个"子类",Vue.extend( options ) var barHtml = '<div class="page-bar">'+ '<ul>'+ '<li v-if="cur>1"><a v-on:click=&

vue2.0实现分页组件的实例代码

最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的分页组件, 就自己写了一个, 效果如下: 该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己调整: 首先新建pagination.vue文件, 所有组件的代码都写在这里, 写这样的组件并没有什么太大的难度, 主要是解决父子组件之间值传递的问题 <template> <nav> <ul class="pagination"> <li :

vue组件之间数据传递的方法实例分析

本文实例分析了vue组件之间数据传递的方法.分享给大家供大家参考,具体如下: 1.props:父组件 -->传值到子组件 app.vue是父组件 ,其它组件是子组件,把父组件值传递给子组件需要使用 =>props 在父组件(App.vue)定义一个属性(变量)sexVal = '男'  把该值传递给 子组件(B.vue),如下: App.vue <template> <div id="app"> <!--<router-view>&

vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作

Vue 事件处理方法 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码. v-on:click 单击事件 <button class=" btn btn-info" v-on:click="add(1)"> + + </button> <button class=" btn btn-danger " v-on:click="subtract(1)">

vue2.0$nextTick监听数据渲染完成之后的回调函数方法

vue里面本身带有两个回调函数: 一个是`Vue.nextTick(callback)`,当数据发生变化,更新后执行回调. 另一个是`Vue.$nextTick(callback)`,当dom发生变化,更新后执行的回调. 栗子: ... <ul id="demo"> <li v-for="item in list">{{item}}</div> </ul> ... new Vue({ el:'#demo', data:

基于Vue2.0的分页组件

本文实例为大家分享了Vue2.0分页组件的具体实现代码,供大家参考,具体内容如下 整个示例打包了,有需要的可以下载,有不对的地方欢迎指出:vue分页组件 组件部分代码: Vue.component('zpagenav', { template: `<nav class="zpagenav">` + `<ul class="page-ul">` + `<li v-bind:key="index" v-for="

Vue如何实现监听组件原生事件

在首页开发中,右下角有一个返回顶部的小箭头,将它单独封装成一个BackTop组件,但是它何时出现需要依赖于首页的滑动,即另外一个Scroll组件.如果直接在BackTop组件里面监听,则需要通过this.$emit将事件发射到Home组件中,又在Home中监听自定义事件,比较复杂.因此,我们直接在Home中对BackTop组件进行监听,使用 .native 官网对于native的解释为: .native:监听组件根元素的原生事件 代码如下: 在Home.vue中对back-top组件进行点击事件

vue2.0 如何把子组件的数据传给父组件(推荐)

在父组件 App.vue 中引用子组件 A.vue,把 A中的数据传给App. ps:没看父组件传给子组件的先看看去. 1.代码 子组件 A.vue <template> <div> <h3>这里是子组件的内容</h3> <button v-on:click="spot">点一下就传</button> </div> </template> <script> export defa

使用Vue构建可重用的分页组件

Web应用程序中资源分页不仅对性能很有帮助,而且从用户体验的角度来说也是非常有用的.在这篇文章中,将了解如何使用Vue创建动态和可用的分页组件. 基本结构 分页组件应该允许用户访问第一个和最后一个页面,向前和向后移动,并直接切换到近距离的页面. 大多数应用程序在用户每次更改页面时都会发出API请求.我们需要确保组件允许这样做,但是我们不希望在组件内发出这样的请求.这样,我们将确保组件在整个应用程序中是可重用的,并且请求都是在操作或服务层中进行的.我们可以通过使用用户单击的页面的数字触发事件来实现

vue任意关系组件通信与跨组件监听状态vue-communication

众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,vuex 太巨,而 $emit 又不好维护 provider 不可控 这个时候就该今天的主角 vue-communication 登场了! vue-communication介绍 他是一个可观测可调试的vue组件通信方案 任意关系组件可直接通信 支持跨组件监听数据变化 支持发送离线数据 安装 yarn add vue-communication // 或者 n