vue自定义事件 子组件把数据传出去
每个 Vue 实例都实现了事件接口(Events interface)，即：
- 使用
$on(eventName)监听事件 - 使用
$emit(eventName)触发事件
1、使用v-on绑定自定义事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="counter-event-example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</body>
<script>
Vue.component('button-counter', {
template: '<button v-on:click="increment">{{ counter }}</button>',
data: function () {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('increment')
}
}
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
</script>
</html>
输出结果：
2、使用自定义事件的表单输入组件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script tyep="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
<p>{{price}}</p>
<currency-input v-model="price"></currency-input>
</div>
</body>
<script>
Vue.component('currency-input', {
template: '<span>$ <input ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)" ></span> ',
props: ['value'],
methods: {
// 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
updateValue: function (value) {
var formattedValue = value
// 删除两侧的空格符
.trim()
// 保留 2 小数位
.slice(0, value.indexOf('.') + 3)
// 如果值不统一，手动覆盖以保持一致
if (formattedValue !== value) {
this.$refs.input.value = formattedValue
}
// 通过 input 事件发出数值
this.$emit('input', Number(formattedValue))
}
}
}) var price
new Vue({
el:'#app',
data:{
price:'1'
} })
</script>
</html>
输出结果：
vue自定义事件 子组件把数据传出去的更多相关文章
- (尚031)Vue_案例_自定义事件(组件间通信第2种方式:vue自定义事件)
自定义事件: 我们知道,父组件使用prop传递数据的子组件,但子组件怎么跟父组件通信呢? 这个时候Vue的自定义事件系统就派得上用场了. 自定义事件知道两件事: (1).绑定 (2).触发 注意:$o ...
- Vue自定义事件
前面的话 父组件使用props传递数据给子组件,子组件怎么跟父组件通信呢?这时,Vue的自定义事件就派上用场了.本文将详细介绍Vue自定义事件 事件绑定 每个 Vue 实例都实现了事件接口 (Even ...
- 【前端vue开发】vue子调父 $emit (把子组件的数据传给父组件)
ps:App.vue 父组件 Hello.vue 子组件 <!--App.vue :--> <template> <div id="app"> ...
- Vue 自定义事件 && 组件通信
1 App.vue 2 <template> 3 <!-- 4 组件的自定义事件: 5 1.一种组件间通信的方式,使用于:子组件===>父组件 6 2.使用场景:A是父组件,B ...
- vue---父调子 $refs （把父组件的数据传给子组件）
ps:App.vue 父组件 Hello.vue 子组件 App.vue : <template> <div id="app"> <input t ...
- vue 父向子组件传递数据，子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- Vue04——vue自定义事件、Router、Vue-cli、发布上线
一.Vue的自定义事件 点击任何一个按钮,按钮本身计数累加,但是每点击三个按钮中的一个,totalCounter 都要累加. <body> <div id="app&quo ...
- 关于vue自定义事件中，传递参数的一点理解
例如有如下场景 先熟悉一下Vue事件处理 <!-- 父组件 --> <template> <div> <!--我们想在这个dealName的方法中传递额外参数 ...
- 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框
vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...
随机推荐
- 【BZOJ3124】[Sdoi2013]直径 树形DP（不用结论）
[BZOJ3124][Sdoi2013]直径 Description 小Q最近学习了一些图论知识.根据课本,有如下定义.树:无回路且连通的无向图,每条边都有正整数的权值来表示其长度.如果一棵树有N个节 ...
- Olya and Energy Drinks(bfs)
D. Olya and Energy Drinks time limit per test 2 seconds memory limit per test 256 megabytes input st ...
- 图片上传JS插件梳理与学习
项目的oper端和seller端,用了两个不同插件,简单了解一下: 一.seller端:AjaxUpload.js seller端使用的是 AjaxUpload.js ,封装好的一个库.调用时传入参数 ...
- ZOJ 2059 The Twin Towers(双塔DP)
The Twin Towers Time Limit: 2 Seconds Memory Limit: 65536 KB Twin towers we see you standing ta ...
- 企业实施DevOPS的七大挑战（转）
从别人的演讲视频中摘抄,做笔记. 什么是DevOPS 如何衡量DevOPS 企业实施DevOPS的七大挑战 自动化测试投入不足 单元测试 API测试 界面测试 功能测试 高度集中的IT服务 标准化 脚 ...
- java.lang.ClassFormatError: Truncated class file
之前跑的很好的程序,因为我本地IDE出了问题的原因,倒是编译的错误的class文件,结果点击的时候报这样的错误,后来重新clean了工程,重新打包解压启动,问题依旧. 解决办法: 把tomcat的wo ...
- "大中台、小前台”新架构下，阿里大数据接下来怎么玩？ (2016-01-05 11:39:50)
"大中台.小前台”新架构下,阿里大数据接下来怎么玩?_炬鼎力_新浪博客 http://blog.sina.com.cn/s/blog_1427354e00102vzyq.html " ...
- 让vs只启动自己想调试的站点
VS中里面多个WEB项目如何只启动一个? 每次启动时,右下角都会出现一堆的 网站有10来个.即使设置了默认启动项目, 但每次按F5启动,或者哪怕是在项目上右键启动新实例 右下角都会出现这一堆的站点 有 ...
- PEP8 Python 编码规范整理（Python）
add by zhj: 这个是豆瓣网友整理的PEP8,算是PEP8的一个简易版本,因为原PEP8内容太多,所以建议先看这篇文章,然后再看PEP8中文翻译 原文:http://www.douban.co ...
- T-SQL怎样提高数据库性能
总结: 1.书写问题 2.表连接方式 3.索引的抉择 4.执行计划之参数嗅探 5.子查询与表连接的效率 6.临时表.CTE.表变量的选择 7.常用sp与select的缓存命中 8.锁(善用nolock ...