一、在通过点击事件触发的子组件中:

addCart(event) {
if (!event._constructed) {
return;
}
if (!this.food.count) {
Vue.set(this.food, 'count', 1);
} else {
this.food.count++;
}
this.$emit('cartadd', event.target)
},// cartcontrol.vue组件

  

 二、在父组件中 

<div class="cartcontrol-wrapper">
<cartcontrol :food="food" v-on:cart-add="cartAdd"></cartcontrol>
</div>// goods.vue组件中使用v-on来监听 <shopcart ref="shopcart"
:selectFoods="selectFoods"
:deliveryprice="seller.deliveryPrice"
:minprice="seller.minPrice"
>
</shopcart> methods:{
cartadd(target) {
// 传递给子组件
this.$refs.shopcart.drop(target)
}
}

  

 三、在接收的子组件中

methods: {
drop(el) {
console.log(el);
}
}// shopcart.vue组件

  

  

 

原文地址:http://coding.imooc.com/learn/questiondetail/3769.html

vue.js 组件监听的更多相关文章

  1. Vue.js:监听属性

    ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...

  2. Vue子组件监听事件中传递参数的方法

    在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...

  3. vue JS实现监听浏览器返回按键事件

    // 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...

  4. vue任意关系组件通信与跨组件监听状态 vue-communication

    大家好!我是木瓜太香! 众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,vuex 太巨,而 $emit 又不好 ...

  5. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  6. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  7. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

  8. Vue.js 组件的三个 API:prop、event、slot

    组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...

  9. Vue.js组件的重要选项

    Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...

随机推荐

  1. hdu 3091 Necklace 状态压缩dp *******

    Necklace Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 327680/327680 K (Java/Others)Total ...

  2. ueditor PHP版本使用方法

    1.ueditor是百度很好用的一款文本编辑器,第一次使用,在此记录使用方法. 2.从http://ueditor.baidu.com/website/download.html#ueditor下载e ...

  3. nodejs繁琐地自建路由

    一.繁琐的自建路由 app.js var server = require('./server'); server.startServer(); server.js var http = requir ...

  4. linux系统下php扩展的安装

    0. 这里以php安装redis扩展为例 1. 首先下载并解压redis扩展包 [root@xxx ~]# cd /usr/local/src [root@xxx src]# wget https:/ ...

  5. 优秀iOS文章集合

    Runtime 10种用法(没有比这更全的了成为iOS顶尖高手,你必须来这里(这里有最好的开源项目和文章)iOS逆向Reveal查看任意app 的界面JSPatch (实时修复App Store bu ...

  6. 【译】MapCSS 与 CartoCSS

    原文地址: https://gist.github.com/tmcw/4319642 CartoCSS 的作者是通过 Cascadenik 为灵感进而创作的 CartoCSS. CartoCSS 与 ...

  7. GeoJSON相关操作

    简介 本文主要介绍GEOJSON相关的操作 环境 gt-geojson-.jar,jts-1.8.jar 直接上代码 代码 wkt格式的geometry转成json格式 public String e ...

  8. 向Github提交更改的代码

    更改了本地的某一文件的代码,那么如何覆盖Github上的同一文件代码呢?请看以下步骤: 1.先用 git status 看你更改了哪些文件: 2.然后 git add 你想要提交的更改的文件 或者 g ...

  9. first-软件工程

    第一部分:结缘计算机 1.你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢?(必答) 之前高中班上男生特别喜欢软件这类的东西,每期电脑报都要买,我也会每期电脑报都会借来看,久而久之我就喜欢上 ...

  10. 通过JavaScript创建Qml对象

    有两种方法可以创建,都是全局对象Qt提供的方法 一:用Qt.createComponent加载一个qml文件并创建Component 二:用Qt.createQmlObject从一个qml字符串创建C ...