怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?
首先, Vue 里面的组件之间的数据流动是 单向 的, 数据可以从父组件传递给子组件, 但不能从子组件传递给父组件, 因为组件和组件之间是 隔离 的. 就像两个嵌套的 黑盒子 .
能通过 props 向子组件传递数据其实是因为子组件 暴露 出了这个属性到 外部, 但子组件并不知道是谁把数据传过来的.
要把数据传回给父组件, 那就需要 自定义事件, 这相当于是给子组件安了一个 监视器 , 使得父组件可以 监测 到子组件的一举一动, 这样也就可以拿到子组件的数据了.
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<title>Vue Test</title>
</head> <body>
<div id="app">
<div id="counter-event-example">
<p>{{ total }}</p>
<!-- 父组件绑定子组件的自定义事件: increment -->
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
</div> <script>
Vue.component('button-counter', {
template: '<button v-on:click="incrementHandler">{{ counter }}</button>',
// 这里的 data 不是一个对象, 而是一个可以返回一个对象的函数
// 好处是每个实例可维护一份被返回对象的独立拷贝，若 data 为对象则会影响其他实例
data: function () {
return {
counter: 0
}
},
methods: {
incrementHandler: function () {
this.counter += 1;
// $emit() 可将 调用当前方法的事件 外抛, 实现 自定义事件.
this.$emit('increment');
}
},
})
new Vue({
el: '#counter-event-example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
</script>
</body> </html>
怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?的更多相关文章
- vue 子组件把数据传递给父组件
<div id="app"> <child v-on:drop='parent'></child> //这里v-on:drop="pa ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- Vue：v-on自定义事件
Vue中父组件使用prop向子组件传递数据,那么子组件向父组件使用什么方式传递信息:自定义事件. 1.先来看官网上面教程 每个 Vue 实例都实现了事件接口,即: 使用 $on(eventName) ...
- 04 . Vue组件注册,数据交互,调试工具及组件插槽介绍及使用
vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...
- 04 . Vue组件注册,组件间数据交互,调试工具及组件插槽介绍及使用
vue组件 组件(Component)是 Vue.js 最强大的功能之一. 组件可以扩展 HTML 元素,封装可重用的代码. 组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...
- Vue的父子组件v-model双向绑定，父组件修改子组件中绑定的v-model属性
先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
- vue教程2-08 自定义键盘信息、监听数据变化vm.$watch
vue教程2-08 自定义键盘信息 @keydown.up @keydown.enter @keydown.a/b/c.... 自定义键盘信息: Vue.directive('on').keyCode ...
- Vue 组件&组件之间的通信 之 父组件向子组件传值
父组件向子组件传值:父组件通过属性向下传值的方式和子组件通信: 使用步骤: 定义组件:现有自定义组件com-a.com-b,com-a是com-b的父组件: 准备获取数据:com-b要获取父组件dat ...
- vue $emit 父组件与子组件之间的通信（父组件向子组件传参）
1.首先新建一个子页面为 env.vue的文件(名字这里大家可以自取) 2.然后把子页面引入父页面,代码如图: import env from '@/components/common/env' ex ...
随机推荐
- CISCO实验记录四：备份路由器的IOS
1.配置好TFTP服务器(假设ip为192.168.2.1) 2.查看当前IOS名称 #show version 输出中有一段:System image file is "bootflash ...
- Python中的变量、对象
由于没时间系统学习下Python 只能见一个问题探究一个问题了 一.初级 - 对象 关于Python中的数据类型,今天重新认识了下.[参考] 首先,Python中,对象才有类型, 变量是没有类型的,它 ...
- bash脚本获取绝对路径的最后一个目录名称
比如绝对路径是/root/autoHls/streamID 因为脚本里面想直接用这个streamID来推流 下面是方法 #!/bin/bash dir="/root/autoHls" ...
- CSS3 新特性
~平时喜欢逛博客,看别人的学习总结和遇到的问题解决办法,恰好最近在做书签整理,翻到了之前一个前辈移动前端的总结,所以我就按他的总结模块对自己的知识进行了梳理,不过由于都是手写的,为了方便,下面的都是平 ...
- vs2017中信号与槽连接
在vs2012里和在Qt Creator里添加信号和槽不一样,这里把两种环境下怎么添加详细说明一下 1.在vs2012里添加信号和槽 新建一个qt的项目QtDemo 在qtdeom.h里添加槽 pri ...
- express使用ejs模板引擎渲染html文件
小场景小知识点. 在使用express过程中,按照官网教程,利用express生成器很容易初始化express项目模板. 那么初始化项目之后应该如何使用ejs作为模板引擎呢?如下 // 注释掉默认生成 ...
- dts是如何来描述iommu与PCI(e)之间的关系?
1. 在一颗树的根下每个PCI(e)设备被它的请求id(AKA RID)独一无二的标识,一个请求ID由三部分组成,总线号,设备号和功能号,如: Bits [15:8] 是总线号 Bits [7:3]是 ...
- GIT管理以及运行规范
继前天看分享的前后端分离后,又重新研究了GIT分支与各个环境的应用. 从开始使用git就一直有在网上查各种资料,查他的运行规范.但不知道是自己理解不够还是怎么的,一直用得不是很好. 根据自己的摸索,整 ...
- ps在psd格式图片里面切图流程
第一. 第二. xx的地方自己重新命名 第三. 第四.
- BrowserUtils
import android.content.Context; import android.content.Intent; import android.net.Uri; public class ...