子组件与父组件的事件传递具体实现如下:

子组件:

<template>
<section class="xftz-data-list">
<div class="data-list-cont">
<scroll :data="listData" :pullup="pullup" @scrollToEnd="loadUp" ref="scroll" class="list">
<div>
<slot></slot>
</div>
<div v-show="!listData.length">
<loading></loading>
</div>
</scroll>
</div>
</section>
</template> <script>
export default {
methods: {
/* 上拉加载 */
loadUp () {
this.$emit('selfevent'
)
}
}
}
<script>

父组件:

<template>
<div class="xftz-optional-page">
<data-list :topDoc="'headTop'" :listTitle="listTitle" :listData="listData" @selfevent="selfevent"></data-list>
</div>
</template> <script>
import DataList from 'src/common/data-list/data-list'
export default {
methods: {
/* 上拉加载 */
selfevent
() {
console.log('加载')
}
}
}
</script>
这里需要注意的是子组件和父组件之间传递值是通过emit方法进行的

子组件中使用

this.$emit("selfevent", data);

父组件中使用

<data-list @selfevent="selfevent"></data-list>

vue组件的使用和事件传递的更多相关文章

  1. vue组件详解——使用props传递数据

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 在 Vue 中,父子组件的关系可以总结为 props向下传递,事件向上传递.父组件通过 ...

  2. vue组件中—bus总线事件回调函数多次执行的问题

    在利用vue组件进行事件监听时发现,如果对N个vue组件实例的bus总线绑定同一事件的回调函数,触发任意组件的对应事件,回调函数至少会被执行N次,这是为什么呢? 为此,调研了普通对象的事件绑定和触发实 ...

  3. VUE组件间数据方法的传递,初步了解

    父组件的数据传递到子组件: 子组件:(其中fMsg是要从父组件传递过来的数据,注意fMsg要在子组件props里先定义) 父组件:(使用v-bind,将自身数据绑定给中转属性fMsg,从而通过 子组件 ...

  4. vue组件添加鼠标滚动事件

    在一个组件标签上加鼠标滚动事件,应该写成    @mousewheel.native

  5. vue组件通信&&v兄弟组件通信eventbus遇到的问题(多次触发、第一次不触发)

    组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的 (vuex以后再说). 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <templ ...

  6. vue组件之间的通信, 父子组件通信,兄弟组件通信

    组件通讯包括:父子组件间的通信和兄弟组件间的通信.在组件化系统构建中,组件间通信必不可少的. 父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> < ...

  7. Android事件传递机制总结

    Android中控件的分类 Activity dispatchTouchEvent(MotionEvent e) onTouchEvent(MotionEvent e) ViewGroup(View) ...

  8. Vue 组件通信方案

    父组件--> 子组件 1. 属性设置 父组件关键代码如下: <template> <Child :child-msg="msg"></Child ...

  9. Vue框架Element的事件传递broadcast和dispatch方法分析

    前言 最近在学习饿了么的Vue前端框架Element,发现其源码中大量使用了$broadcast和$dispatch方法,而Element使用的是Vue2.0版本,众所周知在Vue 1.0升级到2.0 ...

随机推荐

  1. 雷林鹏分享:服务器上的 XML

    服务器上的 XML XML 文件是类似 HTML 文件的纯文本文件. XML 能够通过标准的 Web 服务器轻松地存储和生成. 在服务器上存储 XML 文件 XML 文件在 Internet 服务器上 ...

  2. 再谈Lasso回归 | elastic net | Ridge Regression

    前文:Lasso linear model实例 | Proliferation index | 评估单细胞的增殖指数 参考:LASSO回歸在生物醫學資料中的簡單實例 - 生信技能树 Linear le ...

  3. Linux ----> debian中环境的常见配置

    环境: (debian 9)/(lubuntu18.0.4+virtualbox) 1.配置下载源: gedit /etc/apt/sources.list #163 deb http://mirro ...

  4. javaweb课程信息管理系统

    1.DBUtil包连接数据库 2.Bin包设计成员函数及方法 3.Dao包设计sql语句 4.servlet包增删改查方法 5.service连接servlet 6.设计jsp增删改查页面 7.连接各 ...

  5. Confluence 6 如何让我的小组成员知道那些内容是重要的

    如果你的 Confluence 中已经有了很多内容,定义那些内容是重要看起是一件艰巨的任务 —— 但是下面的一些特性能够帮助你的小组确定那些内容是他们应该关心的. 我的空间(My Spaces) 添加 ...

  6. Docker 只要一小时,零基础入门Docker(转)

    转自:https://zhuanlan.zhihu.com/p/23599229 推荐:https://hijiangtao.github.io/2018/04/17/Docker-in-Action ...

  7. python基础之循环语句,格式化输出以及编码

    1.while循环语句 1.1 常见的几种结构    1. while+判断条件 循环体 2. while+判断条件 循环体 else 语句 tips:while循环如果满足条件的话,会一直循环循环体 ...

  8. python记录_day18 反射 判断函数与方法

    一.三个内置函数 1.issubclass(a, b)  判断a类是否是b类的子类 class Foo: pass class Zi(Foo): pass class Sun(Zi): pass pr ...

  9. MyBatis中mybatis-generator代码生成的一般过程

    MyBatis框架的使用,可以参考我的文章: https://blog.csdn.net/JayInnn/article/details/81746571(基于Mybatis实现一个查库的接口) ht ...

  10. 移动端rem适配 flex.js

    (function() { document.addEventListener('DOMContentLoaded', function () { var html = document.docume ...