<div id="app">
<child v-on:drop='parent'></child> //这里v-on:drop="parent" 由于用了定义模板组件功能,然后在父组件里定义一个HTML元素绑定这个子组件后才能在父组件通过这个HTML元素使用。
</div> <script>
var child = {
template:"<div v-on:click='drop'>子组件</div>",
methods:{
drop:function(){
this.$emit('parent',"传递的数据给父组件"); // 当我们点击child组件的时候,他会触发drop,drop里面有$emit会触发parent事件, $emit("触发父级事件","要传递的数据")
}
}
} new Vue({
el:"#app",
methods:{
parent:function(value){
console.log(value);
}
},
templates:{
child
}
})
</script>

vue 子组件把数据传递给父组件的更多相关文章

  1. 怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?

    首先, Vue 里面的组件之间的数据流动是 单向 的, 数据可以从父组件传递给子组件, 但不能从子组件传递给父组件, 因为组件和组件之间是 隔离 的. 就像两个嵌套的 黑盒子 . 能通过 props ...

  2. react组件的数据传递

    在react中,为了解决html标签构建应用的不足,将公共的功能单独抽离成一个文件作为一个组件,在使用的地方按需引入,既然是组件彼此调用,就会涉及到父子组件的通信,下面主要来总结简单的组件通信. 1, ...

  3. vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法

    1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...

  4. vue 2.x之组件的数据传递(一)

    这是根据官方提供的脚手架vue-cli搭建,通过简单的案例来介绍vue数据的传递的方式,根据自己平时用到的,来做简单的总结: 1.父组件传递数据给子组件 父组件传递数据给子组件,需要把子组件引入,并挂 ...

  5. Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架

    上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...

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

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

  7. 13. VUE 组件之间数据传递

    组件数据传递: 父组件向内传递属性---动态属性 子组件向外发布事件 solt 插槽传递模板---具名solt 1. 父组件向子组件传递数据 子组件在父组件的并作为标签引入,通过设置标签的属性传递数据 ...

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

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

  9. 浅入深出Vue:子组件与数据传递

    上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...

随机推荐

  1. talib 中文文档(七):Overlap Studies Functions

    Overlap Studies Functions 重叠指标 BBANDS - Bollinger Bands 函数名:BBANDS 名称: 布林线指标 简介:其利用统计原理,求出股价的标准差及其信赖 ...

  2. Python开发【Django】:中间件、CSRF

    CSRF 1.概述 CSRF(Cross Site Request Forgery)跨站点伪造请求,举例来讲,某个恶意的网站上有一个指向你的网站的链接,如果某个用户已经登录到你的网站上了,那么当这个用 ...

  3. 第六章并发编程,异步执行框架executor

    异步执行框架executor是一个接口,只有一个方法.接受一个Runnable做为参数,执行任务. 将任务的执行与提交解耦. 1:executor package java.util.concurre ...

  4. python pytz 结合时区的日期操作

    有一个安排在2012 年12 月21 日早上9:30 的电话会议,地点在芝加哥.而朋友在印度的班加罗尔,那么他应该在当地时间几点参加这个会议呢? 对几乎所有涉及到时区的问题,你都应该使用pytz 模块 ...

  5. Spring整合Quartz定时发送邮件

    功能描述:刚开始接触Quartz,试着用Quartz整合spring实现每隔一分钟发送一封邮件连续发送10次 核心jar: 邮件发送:commons-email-1.2.jar mail.jar(必须 ...

  6. json反序列化快捷实体类

    有时候我们反序列化一个json串只为了提取里面的数据,而且json串的层级结构可能会比较复杂,定义对应的实体类会多而杂,有时还不一定能达到想要的效果. 则可以关注下以下两个类: java :      ...

  7. [置顶] SNMP协议详解<三>

    在上篇文章中,说到了SNMPv3主要在安全性方面进行了增强,采用USM(基于用户的安全模型)和VACM(基于视图的访问控制模型)技术.下面我们就主要讲解SNMPv3的报文格式以及基于USM的认证和加密 ...

  8. JS的 instanceof 方法

    http://www.cnblogs.com/jasonxuli/p/6769282.html 这是 2014-12-10 发在 iteye 上的文章 今天突然想起js的原型继承模型和相关的proto ...

  9. 20145104张家明 《Java程序设计》第3周学习总结

    20145104张家明 <Java程序设计>第4周学习总结 教材学习内容总结 第四章 认识对象 4.1 类与对象 4.1.1 定义类 类定义时使用class关键词,建立实例要用new关键词 ...

  10. 20145314郑凯杰《网络对抗技术》实验1 逆向及Bof基础实践

    20145314郑凯杰<网络对抗技术>实验1 逆向及Bof基础实践 1.1 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数 ...