之前写过一篇关于 vue2.0中v-on绑定自定义事件 的随笔,但是今天实际应用的时候才发现根本就不理解,下面是实际工作中遇到的问题:

【情景描述】页面中的【下拉搜索组件】,因为多个页面中用到,所以抽离出来作为了一个组件

  ① 【之前的做法】下拉搜索组件的数据是由父组件传递过来的,这就导致了多个页面同一操作进行了多次数据处理、传递

  ② 【现在的做法】下拉搜索组件需要处理的内容包括:页面结构、样式、数据的获取展示、点击操作、更新列表数据并返回父组件

未完,待续...

学以致用 ---- vue子组件→父组件通信的更多相关文章

  1. vue学习之父组件与子组件之间的交互

    1.父组件数据传给子组件 父组件中的msgfather定义数据 在之组件中通过设置props来取得希望从父组件中获得的值 通过设置这两个属性就可以从父组件传数据到子组件 2.子组件传数据给父组件(这里 ...

  2. vue子传父、父传子

    子传父 vue子传父使用$emit传值 子组件: <template> <div> <button @click="toParent">点击传到 ...

  3. 关于Vue中页面(父组件)下拉,页面中的子组件加载更多数据的实现方法

    一个项目中存在很多这种情况:父组件(页面)中的子组件需要做下拉加载更多的需求,但是这个下拉到底部的动作只能通过监控页面(父组件)来完成 这就需要父子组件之间的通信,代码如下: 1. 建立一个用于父子组 ...

  4. Vue中,父组件向子组件传值

    1:在src/components/child/文件夹下,创建一个名为:child.vue的子组件 2:在父组件中,设置好需要传递的数据 3:在App.vue中引入并注册子组件 4:通过v-bind属 ...

  5. Vue系列之 => 父组件向子组件传值

    父组件向子组件传递数据 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta c ...

  6. vue 组件-父组件传值给子组件

    父组件通过属性,传值给子组件,子组件通过,props数组里的名称来接受父组件传过来的值. HTML部分: <div id="app"> <tmp1 :parent ...

  7. 【前端vue开发】vue子调父 $emit (把子组件的数据传给父组件)

    ps:App.vue 父组件 Hello.vue 子组件 <!--App.vue :--> <template> <div id="app"> ...

  8. vue中的父组件及子组件生命周期的执行顺序

    一.没有任何任何显示与隐藏限制条件的情况下: 1.运行的顺序依次是: 父组件created→父组件beforeMounted→子组件created→子组件beforeMounted→子组件mounte ...

  9. vue.js中父组件触发子组件中的方法

    知识点:vue.js中,父组件的method中,触发子组件中的方法,获得子组件中的定义的属性 (1)子组件 : child_crud.js var html_child_crud= "< ...

随机推荐

  1. try except else

    try except 语句还有一个可选的else子句,如果使用这个子句,那么必须放在所有的except子句之后.这个子句将在try子句没有发生任何异常的时候执行.例如: for arg in sys. ...

  2. js数组之从数组中删除元素

    使用pop()这个函数可以从数组中删除末尾的元素,shift方法可以删除数组中第一个元素.这些都是js中自带的函数,如果不使用这些函数的话,自己写的代码效率会很低的. <html> < ...

  3. Javascript-蔬菜运算价格

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. GNU

    1983年,理查德.斯托曼提出GNU计划(革奴计划),希望发展出一套完整的开放源代码操作系统来取代Unix,计划中的操作系统,名为GNU. 1989年,发表GNU通用公共许可协议(GPL).GPL条款 ...

  5. 用python实现一个简单的socket网络聊天通讯 (Linux --py2.7平台与windows--py3.6平台)

    windows   --> windows 写法均在py3.6 客户端写法 import socket client = socket.socket() client.connect(('192 ...

  6. AOAPC I: Beginning Algorithm Contests (Rujia Liu) Volume 6. Mathematical Concepts and Methods

    uva 106 这题说的是 说计算 x^2 + y^2  =  z^2  xyz 互质 然后计算个数和 在 N内 不在 勾股数之内的数的个数 然后去找需要的 维基百科上 看到 另 n*m*2 =b   ...

  7. Ignite缓存大小管理

    Ignite使用计算机内存存储缓存数据,达到提升缓存读写性能的.但是计算机内存往往是有限的,我们必须合理管理Ignite对内存的使用. Ignite可以使用JVM堆外内存和堆内内存.使用堆外内存基本上 ...

  8. Zookeeper使用实例——服务节点管理

    分布式处理中,总会存在多个服务节点同时工作,并且节点数量会随着网络规模的变化而动态增减,服务节点也有可能发生宕机与恢复.面对着动态增减的服务节点,我们如何保证客户请求被服务器正确处理呢.我们可以通过z ...

  9. python repr方法和str方法

    每个类都有默认的__repr__, __str__方法,用print 实例时调用类的str方法,直接输出类的实例,调用的是类的repr方法 在命令行界面,不用print命令打印而是直接写变量名,就是用 ...

  10. Linux基础命令---bc

    bc bc是一种算数语言,其语法和c语言类似,可以交互执行.通过命令行选项可以获得一个标准的数学库.如果请求,在处理任何文件之前定义数学库.BC从处理所有文件的代码开始.命令行中列出的文件按所列顺序排 ...