vue子组件使用自定义事件向父组件传递数据
使用v-on绑定自定义事件可以让子组件向父组件传递数据，用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<parent-component></parent-component>
</div>
<template id="parent-component">
<div>
<p>总数是{{total}}</p>
<child-component @increment="incrementTotal"></child-component>
<!--@increment是子组件this.$emit('increment'自定义的事件用来告诉父组件自己干了什么事
然后会触发父子间incrementTotal的方法来更新父组件的内容)-->
</div>
</template>
<template id="child-component">
<button @click="increment()">{{mycounter}}</button>
</template>
<script>
var child=Vue.extend({
template:"#child-component",
data:function () {
return {
mycounter:0
}
},
methods:{
increment:function(){
this.mycounter=10;
this.$emit("increment",this.mycounter);//把this.mycounter传递给父组件
}
}
})
var parent=Vue.extend({
data:function () {
return {
total:0
}
},
methods:{
incrementTotal:function(newValue){
this.total+=newValue;
}
},
template:"#parent-component",
components:{
'child-component':child
} })
var vm=new Vue({
el:"#app",
components:{
'parent-component':parent
} })
</script>
</body>
</html>
@increment是子组件this.$emit('increment'自定义的事件,newValue)用来告诉父组件自己干了什么事
同时还可以传递新的数据给父组件
然后会触发父子间incrementTotal的方法来更新父组件的内容)。
这里需要注意几个点：
1.
图中红色圈中的部分是对应的，子组件在自己的methods方法里面写自己的事件实现，然后再父组件里面写字组件时给子组件绑定上methods方法里面的
事件名称，要一一对应
这里自定义事件里面的要写父组件的方法名，父组件里面定义该方法。
父组件里面的方法可以接收子组件this.$emit('increment',this.mycounter);传递过来的数值:this.mycounter,
到父组件的方法里面就是newValue参数，这样就实现了子组件向父组件传递数据
vue子组件使用自定义事件向父组件传递数据的更多相关文章
- vue第八单元(组件通信 子父，父子组件通信 自定义事件 事件修饰符 v-model props验证 )
第八单元(组件通信 子父,父子组件通信 自定义事件 事件修饰符 v-model props验证 ) #课程目标 掌握使用props让父组件给子组件传参(重点) 掌握props属性的使用以及prop验证 ...
- vue子组件的自定义事件
父子组件的信息传递无碍就是父组件给子组件传值(props和$attrs)和父组件触发子组件的事件($emit) 之前已经谈过了父组件给子组件传值了,现在来说说父组件触发子组件的自定义事件吧-- 实际上 ...
- 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 子组件通过 $emit 触发父组件的自定义事件
子组件: <template> <div class="train-city"> <h3>父组件传给子组件的toCity:{{sendData} ...
- Vue父子组件通信（父级向子级传递数据、子级向父级传递数据、Vue父子组件存储到data数据的访问）
Vue父子组件通信(父级向子级传递数据.子级向父级传递数据.Vue父子组件存储到data数据的访问) 一.父级向子级传递数据[Prop]: ● Prop:子组件在自身标签上,使用自定义的属性来接收外界 ...
- Vue的父子组件v-model双向绑定，父组件修改子组件中绑定的v-model属性
先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
- vuejs组件交互 - 02 - 事件中心管理组件间的通信
事件中心 这个可以是一个空的全局的Vue实例,其他的组件利用这个实例emit和on自定义事件,这样组件定义了自己的事件处理方法. import Vue from 'Vue' window.eventH ...
- 42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue 【 子子组件 => 子组件 => 父组件 】 的事件和参数的传递
1,子子组件 TodoItem.vue <template> <div class="todo-item" :class="{'is-co ...
随机推荐
- nginx中server块的匹配顺序
客户端发出一个http请求时,nginx收到后会取出header头中的host,与nginx.conf中每个server的server_name进行匹配,以此决定到底由哪一个server块来处理这个请 ...
- 一、早期（Early Stage）
一.早期(Early Stage) 如果单纯从零基础开始,早期(Early Stage)应该是一到两个月(由于英语与中文差异比与其他语言大,中国同学至少两个月,但也不应过长.我们的经验是一般中国同学会 ...
- SQL查询出一个表数据插入到另一个表里
下面两中方式都是将 srcTbl 的数据插入到 destTbl,但两句又有区别的: 方式一 (select into from)要求目标表(destTbl)不存在,因为在插入时会自动创建. selec ...
- 17.3.16---python内建函数
内置函数,无需import,任何时候都可以直接被使用 1------ Python针对众多的类型,提供了众多的内建函数来处理(内建是相对于导入import来说的,后面学习到包package时,将会介绍 ...
- Opencv笔记（十）——卷积基础
卷积 什么是二维卷积呢?看下面一张图就一目了然: 卷积就是循环对图像跟一个核逐个元素相乘再求和得到另外一副图像的操作,比如结果图中第一个元素5是怎么算的呢?原图中3×3的区域与3×3的 ...
- Monkey日常测试命令
一,LOG日志抓取 adb logcat -b main -v time >log.txt --实时日志打印 adb shell monkey -p com.eeyescloud.eeyes ...
- win10+CUDA9.0176、CUDNN7.6.0安装
在github上下载了一个文本分类的代码,包含了CNN.LSTM等分类模型,运行时说我的CUDA版本不行,我原来是9.1,让我安装9.0 然后开始卸载9.1啊,在此感谢博主:https://blog. ...
- [Algo] 281. Remove Spaces
Given a string, remove all leading/trailing/duplicated empty spaces. Assumptions: The given string i ...
- 吴裕雄--天生自然python机器学习：决策树算法
我们经常使用决策树处理分类问题’近来的调查表明决策树也是最经常使用的数据挖掘算法. 它之所以如此流行,一个很重要的原因就是使用者基本上不用了解机器学习算法,也不用深究它 是如何工作的. K-近邻算法可 ...
- Docker系列七: 使用Humpback管理工具管理容器(一款UI管理工具)
Humpback 可以帮助企业快速搭建轻量级的 Docker 容器云管理平台,若将你的 Docker 主机接入到 Humpback 平台中,就能够为你带来更快捷稳定的容器操作体验. 功能特点 Web操 ...