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. 跟踪分析Linux内核的启动过程--20135334赵阳林

    解决ubuntu下make menuconfig错误问题 http://blog.sina.com.cn/s/blog_726684020100r1oo.html 安装好相关的软件之后,键入make ...

  2. 单点登录(九)-----遇到问题-----FileNotFoundException: class path resource-UsernamePasswordWrapperAuthenticatio

    运行cas server 项目时 报错 FileNotFoundException: class path resource-UsernamePasswordWrapperAuthenticatio ...

  3. Java入门:基础算法之从字符串中找到重复的字符

    本程序演示从一个字符串中找出重复的字符,并显示重复字符的个数. import java.util.HashMap; import java.util.Map; import java.util.Set ...

  4. python——type()、metaclass元类和精简ORM框架

    1.type()函数 if __name__ == '__main__': h = hello() h.hello() print(type(hello)) print(type(h)) Hello, ...

  5. C#实现执行数据库事务案例

    我是实际项目来拆出来做的案例,场景是比如我们在做电商网站时,在创建订单时的一系列操作,通常在创建订单时我们需要数据表的操作有:订单的表头(主表).订单的详细.清空购物车.甚至是修改优惠劵的状态(在使用 ...

  6. grep与正则表达式详解和实例

    转载自:http://www.jb51.net/article/31207.htm grep 工具,以前介绍过. grep -[acinv] '搜索内容串' filename -a 以文本文件方式搜索 ...

  7. 数据分析与展示---Numpy数据存取与函数

    简介 一:数据的CSV文件存取(一维或二维) (一)写入文件savetxt (二)读取文件loadtxt 二:多维数据的存取 (一)保存文件tofile (二)读取文件fromfile (三)NumP ...

  8. Linux初学之vmware Workstation 网络连接三种模式

    简介: VM(VMware Workstation简称VM,后面都将用VM代替阐述)是一款功能强大的虚拟化软件.VM支持在 单一的桌面上同时运行多款不同的操作系统,能够模拟完整的网络环境,支持pxe功 ...

  9. vue中的slot与slot-scope

    深入理解vue中的slot与slot-scope vue+element-ui+slot-scope或原生实现可编辑表格 vue插槽详解

  10. [Luogu 1073] NOIP2009 最优贸易

    [Luogu 1073] NOIP2009 最优贸易 分层图,跑最长路. 真不是我恋旧,是我写的 Dijkstra 求不出正确的最长路,我才铤而走险写 SPFA 的- #include <alg ...