vuejs父子组件之间数据交互详解

父子组件之间的数据交互遵循:

props down - 子组件通过props接受父组件的数据
events up - 父组件监听子组件$emit的事件来操作数据

示例

子组件的点击事件函数中$emit自定义事件

export default {
 name: 'comment',
 props: ['issue','index'],
 data () {
 return {
  comment: '',
 }
 },
 components: {},
 methods: {
 removeComment: function(index,cindex) {
  this.$emit('removeComment', {index:index, cindex:cindex});
 },
 saveComment: function(index) {
  this.$emit('saveComment', {index: index, comment: this.comment});
  this.comment="";
 }
 },
 //hook
 created: function () {
 //get init data

 }

}

父组件监听事件

复制代码 代码如下:

<comment v-show="issue.show_comments" :issue="issue" :index="index" @removeComment="removeComment" @saveComment="saveComment"></comment>

父组件的methods中定义了事件处理程序

 removeComment: function(data) {
  var index = data.index, cindex = data.cindex;
  var issue = this.issue_list[index];
  var comment = issue.comments[cindex];
  axios.get('comment/delete/cid/'+comment.cid)
  .then(function (resp) {
  issue.comments.splice(cindex,1);
  });
 },
 saveComment: function(data) {
  var index = data.index;
  var comment = data.comment;
  var that = this;
  var issue =that.issue_list[index];
  var data = {
  iid: issue.issue_id,
  content: comment
  };

  axios.post('comment/save/',data)
  .then(function (resp) {
  issue.comments=issue.comments||[];
  issue.comments.push({
   cid: resp.data,
   content: comment
  });
  });

  //clear comment input
  this.comment="";
 }

 },

注意参数的传递是一个对象

其实还有更多的场景需要组件间通信

官方推荐的通信方式

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

时间: 2017-08-07

Vue键盘事件用法总结

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件 键盘事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></sc

vuejs事件中心管理组件间的通信详解

本文为大家分享了vuejs事件中心管理组件间的通信,供大家参考,具体内容如下 事件中心 这个可以是一个空的全局的Vue实例,其他的组件利用这个实例emit和on自定义事件,这样组件定义了自己的事件处理方法. import Vue from 'Vue' window.eventHub = new Vue(); 事件监听和注销监听 事件监听应在更组件的created钩子函数中进行,在组件销毁前应注销事件监听 //hook created: function () { //listen event w

详解vue组件化开发-vuex状态管理库

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.

Vue2单一事件管理组件通信

本文为大家分享了vue $emit 和 $on 组件通信,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <scri

vue监听滚动事件实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg

Vue.js每天必学之方法与事件处理器

方法处理器 可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet">Greet</button> </div> 我们绑定了一个单击事件处理器到一个方法 greet.下面在 Vue 实例中定义这个方法: var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // 在 `met

详解vue事件对象、冒泡、阻止默认行为

整理文档,搜刮出一个vue事件对象.冒泡.阻止默认行为的代码,稍微整理精简一下做下分享. 事件对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <s

详解Vue 事件修饰符capture 的使用

.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式 即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素.若有多个该修饰符,则由外而内触发. 就是谁有该事件修饰符,就先触发谁. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>.capture事件修饰符</title&g

详解Vue 普通对象数据更新与 file 对象数据更新

最近在做一个多图片上传的组件,需求是做到多文件依次上传,并显示上传进度条. 逻辑部分实现了以后,在更新进度条视图的时候出现一点问题:动态计算生产的进度 progress 属性不会自动更新. 原来的代码是这样写的: let files = this.filePicker.files; if(!files.length) { return; } let arr = []; for(let i = 0, len = files.length; i < len; i++) { let item = fi

js事件冒泡、事件捕获和阻止默认事件详解

谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 1.事件冒泡 先来看一段代码: var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[0]; var $body = document.getElementsByTagName("bo

详解vue中v-on事件监听指令的基本用法

一.本节说明 我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件.拖拽事件.键盘事件等等.这就需要用到我们下面要学习的内容v-on指令. 我们通过一个简单的计数器的例子,来讲解v-on指令的使用. 二. 怎么做 定义数据counter,用于表示计数器数字,初始值设置为0 v-on:click 表示当发生点击事件的时候,触发等号里面的表达式或者函数 表达式counter++和counter--分别实现计数器数值的加1和减1操作 语法糖:我们可以将v-on:click简写为@click 三

vue watch普通监听和深度监听实例详解(数组和对象)

下面通过一段代码给大家介绍vue watch的普通监听和深度监听,具体代码如下所示: var vm=new Vue({ data:{ num:1, obj:{ name:'三儿', age:'21', sex:'女' } }, watch:{ num(val, oldVal){ //普通的watch监听 console.log("num: "+val, oldVal); }, obj:{ //深度监听,可监听到对象.数组的变化 handler(val, oldVal){ console

详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法

最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题.就是当使用@mouseenter 和@mouseleave事件来实现这个需求时却发现鼠标移入后图片出现闪烁现象. 重点:事件写到父元素上才行!!! 0.0 下面写下我的实现方法和实现效果 样式代码: <div class="imgs" v-for="(item,index) in exampleUrl" :key = index @mouseenter ="

详解Vue之事件处理

在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正. 监听事件 可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码.如下所示: <button v-on:click="counter += 1">Add 1</button> <p>按钮被点击了 {{ counter }} 次.</p> 其中counter为Vue自定

详解JavaScript 事件流

事件 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下"事件流"的概念. 事件流 事件流描述的就是从页面中接收事件的顺序.而早期的IE和Netscape提出了完全相反的事件流概念,IE事件流是事件冒泡,而Netscape的事件流就是事件捕获. 事件流类别 事件冒泡 即从下至上,从目标触发的元素逐级向上传播,直到win

详解vue.js组件化开发实践

前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-