vue.js 组件监听
一、在通过点击事件触发的子组件中:
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 组件监听的更多相关文章
- Vue.js:监听属性
ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...
- Vue子组件监听事件中传递参数的方法
在子组件中,我们可以通过以下方式监听事件: v-on:click="$emit('funcName',a)" 如果需要传多个参数,可以通过以下方式: v-on:click=&quo ...
- vue JS实现监听浏览器返回按键事件
// 这个是监听浏览器回退键的returnButton () { let vm = this; $(document).ready(function () { if (window.history & ...
- vue任意关系组件通信与跨组件监听状态 vue-communication
大家好!我是木瓜太香! 众所周知,组件式开发方式给我们带来了方便,不过也引入了新的问题,组件之间的数据就像被一道无形的墙隔开,如果我们希望临时让两个组件直接通信,vuex 太巨,而 $emit 又不好 ...
- vue.js组件化开发实践
前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...
- VUE.JS组件化
VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...
- 浅尝Vue.js组件(一)
本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...
- Vue.js 组件的三个 API:prop、event、slot
组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...
- Vue.js组件的重要选项
Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...
随机推荐
- hdu 3091 Necklace 状态压缩dp *******
Necklace Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 327680/327680 K (Java/Others)Total ...
- ueditor PHP版本使用方法
1.ueditor是百度很好用的一款文本编辑器,第一次使用,在此记录使用方法. 2.从http://ueditor.baidu.com/website/download.html#ueditor下载e ...
- nodejs繁琐地自建路由
一.繁琐的自建路由 app.js var server = require('./server'); server.startServer(); server.js var http = requir ...
- linux系统下php扩展的安装
0. 这里以php安装redis扩展为例 1. 首先下载并解压redis扩展包 [root@xxx ~]# cd /usr/local/src [root@xxx src]# wget https:/ ...
- 优秀iOS文章集合
Runtime 10种用法(没有比这更全的了成为iOS顶尖高手,你必须来这里(这里有最好的开源项目和文章)iOS逆向Reveal查看任意app 的界面JSPatch (实时修复App Store bu ...
- 【译】MapCSS 与 CartoCSS
原文地址: https://gist.github.com/tmcw/4319642 CartoCSS 的作者是通过 Cascadenik 为灵感进而创作的 CartoCSS. CartoCSS 与 ...
- GeoJSON相关操作
简介 本文主要介绍GEOJSON相关的操作 环境 gt-geojson-.jar,jts-1.8.jar 直接上代码 代码 wkt格式的geometry转成json格式 public String e ...
- 向Github提交更改的代码
更改了本地的某一文件的代码,那么如何覆盖Github上的同一文件代码呢?请看以下步骤: 1.先用 git status 看你更改了哪些文件: 2.然后 git add 你想要提交的更改的文件 或者 g ...
- first-软件工程
第一部分:结缘计算机 1.你为什么选择计算机专业?你认为你的条件如何?和这些博主比呢?(必答) 之前高中班上男生特别喜欢软件这类的东西,每期电脑报都要买,我也会每期电脑报都会借来看,久而久之我就喜欢上 ...
- 通过JavaScript创建Qml对象
有两种方法可以创建,都是全局对象Qt提供的方法 一:用Qt.createComponent加载一个qml文件并创建Component 二:用Qt.createQmlObject从一个qml字符串创建C ...