ps:App.vue 父组件
  Hello.vue 子组件 <!--App.vue :--> <template>
  <div id="app">
    <hello @newNodeEvent="parentLisen" />
  </div>
</template> <script>
import hello from './components/Hello'
export default {
name: 'app',
'components': {
hello
},
methods: {
parentLisen(evtValue) {
//evtValue 是子组件传过来的值
alert(evtValue)
}
}
}
</script> <!--Hello.vue :--> <template>
  <div class="hello">
    <input type="button" name="" id="" @click="chilCall()" value="子调父" />
  </div>
</template> <script>
export default {
name: 'hello',
'methods': {
chilCall(pars) {
this.$emit('newNodeEvent', '我是子元素传过来的')
}
}
}
</script>

【前端vue开发】vue子调父 $emit (把子组件的数据传给父组件)的更多相关文章

  1. vue---子调父 $emit (把子组件的数据传给父组件)

    ps:App.vue 父组件  Hello.vue 子组件 ps:App.vue 父组件 Hello.vue 子组件 <!--App.vue :--> <template> & ...

  2. 40.VUE学习之--组件之间的数据传参父组件向子组件里传参,props的使用实例操作

    父组件向子组件里传参,props的使用实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...

  3. vue 子组件把数据传递给父组件

    <div id="app"> <child v-on:drop='parent'></child> //这里v-on:drop="pa ...

  4. vue子组件使用自定义事件向父组件传递数据

    使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...

  5. Vue的父子组件v-model双向绑定,父组件修改子组件中绑定的v-model属性

    先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...

  6. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器web前端:vue组件之间的传值,父组件向子组件传值

    前端方面,EasyDSS流媒体服务器与EasyNVR有着根本的不同.EasyNVR使用的是传统的js来进行开发,而EasyDSS使用的是webpack+vue来进行开发的,了解vue+webpack的 ...

  7. vue $emit 父组件与子组件之间的通信(父组件向子组件传参)

    1.首先新建一个子页面为 env.vue的文件(名字这里大家可以自取) 2.然后把子页面引入父页面,代码如图: import env from '@/components/common/env' ex ...

  8. 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  9. Vue中父组件使用子组件的emit事件,获取emit事件传出的值并添加父组件额外的参数进行操作

    需求是这样的,需要输入这样一个列表的数据,可以手动添加行,每一行中客户编号跟客户姓名是自动关联的,就是说选取了客户姓名之后,客户编号是自动填充的,客户姓名是一个独立的组件,每一个下拉项都是一个大的对象 ...

随机推荐

  1. SDNnet PX Programmming Language

    写在前面 本篇是关于 SDNet PX Programming Language User Guide 其中「Introduction」 部分的一些翻译.理解以及我从其他方面看来的一些资料的整合.网上 ...

  2. Metasploit+python生成免杀exe过360杀毒

    Metasploit+python生成免杀exe过360杀毒 1在kali下生成一个反弹的msf的python脚本,命令如下: msfvenom -p windows/meterpreter/reve ...

  3. linux内核设计与实现一书阅读整理 之第五章

    CHAPTER 5 系统调用 5.1 与内核通信 系统调用在用户空间进程和硬件设备之间添加了一个中间层,该层主要作用有三个: 为用户空间提供了一种硬件的抽象接口 系统调用保证了系统的稳定和安全 每个进 ...

  4. Python OS模块操作文件和目录

    #-*-coding:utf-8-*- import os import shutil ###############OS模块############## #获得当前python脚本的工作目录 os. ...

  5. Java之链表实现栈结构

    package com.wzlove.stack; import java.util.Iterator; import java.util.NoSuchElementException; /** * ...

  6. 解题:WC 2006 水管局长

    题面 初见LCT,动态最小生成树+链上查询max,具体做法是把边转换成点(LCT只能维护点) 时光倒流,先把最后剩的连起来.然后查询就看链上最大值,修改看看链上最大值是否大于当前边,如果是就断开原来的 ...

  7. Go_17:GoLang中如何使用多参数属性传参

    我们常常因为传入的参数不确定而头疼不已,golang 为我们提供了接入多值参数用于解决这个问题.但是一般我们直接写已知代码即所有的值都知道一个一个塞进去就好了,但是绝大部分我们是得到用户的大量输入想通 ...

  8. P3014 [USACO11FEB]牛线Cow Line && 康托展开

    康托展开 康托展开为全排列到一个自然数的映射, 空间压缩效率很高. 简单来说, 康托展开就是一个全排列在所有此序列全排列字典序中的第 \(k\) 大, 这个 \(k\) 即是次全排列的康托展开. 康托 ...

  9. noi题库(noi.openjudge.cn) 3.9数据结构之C++STL T1——T2

    T1 1806:词典 描述 你旅游到了一个国外的城市.那里的人们说的外国语言你不能理解.不过幸运的是,你有一本词典可以帮助你. 输入首先输入一个词典,词典中包含不超过100000个词条,每个词条占据一 ...

  10. Django 2.0.1 官方文档翻译:接下来读什么(page 14)

    接下来读什么(page 14) 现在你应该已经阅读了所有的(page1-13 )介绍材料,决定继续使用Django.我们仅仅做了简要的介绍(事实上,如果你阅读了前面所有的内容,也只是全部文档的5%.) ...