vue 子组件把数据传递给父组件
<div id="app">
<child v-on:drop='parent'></child> //这里v-on:drop="parent" 由于用了定义模板组件功能,然后在父组件里定义一个HTML元素绑定这个子组件后才能在父组件通过这个HTML元素使用。
</div> <script>
var child = {
template:"<div v-on:click='drop'>子组件</div>",
methods:{
drop:function(){
this.$emit('parent',"传递的数据给父组件"); // 当我们点击child组件的时候,他会触发drop,drop里面有$emit会触发parent事件, $emit("触发父级事件","要传递的数据")
}
}
} new Vue({
el:"#app",
methods:{
parent:function(value){
console.log(value);
}
},
templates:{
child
}
})
</script>
vue 子组件把数据传递给父组件的更多相关文章
- 怎样在 Vue 里面使用自定义事件将子组件的数据传回给父组件?
首先, Vue 里面的组件之间的数据流动是 单向 的, 数据可以从父组件传递给子组件, 但不能从子组件传递给父组件, 因为组件和组件之间是 隔离 的. 就像两个嵌套的 黑盒子 . 能通过 props ...
- react组件的数据传递
在react中,为了解决html标签构建应用的不足,将公共的功能单独抽离成一个文件作为一个组件,在使用的地方按需引入,既然是组件彼此调用,就会涉及到父子组件的通信,下面主要来总结简单的组件通信. 1, ...
- vue中子组件调用父组件里面的数据和方法 父组件调用子组件的数据和方法
1.子组件直接调用父组件的数据和方法 在父组件father,vue <template> <div> <!-- 父组件里面的数据 --> <p>父组件里 ...
- vue 2.x之组件的数据传递(一)
这是根据官方提供的脚手架vue-cli搭建,通过简单的案例来介绍vue数据的传递的方式,根据自己平时用到的,来做简单的总结: 1.父组件传递数据给子组件 父组件传递数据给子组件,需要把子组件引入,并挂 ...
- Vue系列(三):组件及数据传递、路由、单文件组件、vue-cli脚手架
上一篇:Vue系列(二):发送Ajax.JSONP请求.Vue生命周期及实例属性和方法.自定义指令与过渡 一. 组件component 1. 什么是组件? 组件(Component)是 Vue.js ...
- Vue的父子组件v-model双向绑定,父组件修改子组件中绑定的v-model属性
先来看下实现的效果,父组件中有个文本框,在点击下面按钮时弹出抽屉,抽屉里也有个文本框,文本框里的初始值要和父组件的文本框同步,并且修改抽屉里的文本框值时 父组件里的文本框值也要跟着改变 网上有大概三种 ...
- 13. VUE 组件之间数据传递
组件数据传递: 父组件向内传递属性---动态属性 子组件向外发布事件 solt 插槽传递模板---具名solt 1. 父组件向子组件传递数据 子组件在父组件的并作为标签引入,通过设置标签的属性传递数据 ...
- vue子组件使用自定义事件向父组件传递数据
使用v-on绑定自定义事件可以让子组件向父组件传递数据,用到了this.$emit(‘自定义的事件名称’,传递给父组件的数据) <!DOCTYPE html> <html lang= ...
- 浅入深出Vue:子组件与数据传递
上一篇了解了组件的概念及在使用中需要注意的地方.在面对单个组件逻辑复杂需要拆分时,难免会遇到父子组件之间数据传递的问题.那么我们来了解一下在父子组件之间进行数据传递时需要遵循哪些约定,以及要注意哪些问 ...
随机推荐
- 大规模Docker平台自动化监控之路
本文介绍了通过Monitor,如何实现大规模容器运维平台的自动化监控需求. 尽管Docker技术目前还处于不稳定的发展与标准制定阶段,但这门技术已经呈现了极其火热的增长状态,却已经是不争的实事.到底有 ...
- CF1028E Restore Array 构造
正解:构造 解题报告: 传送门! 是的灵巧还在写构造,,,不知道484我做题太慢的缘故我感觉我做了好久的构造了然而一半的题目都没做完QAQ 要哭出来了QAQ 然后说下这题的解法,开始花了这——么的时间 ...
- CF593C Beautiful Function 构造
正解:构造 解题报告: 传送门! 我知道我咕了好几篇博客似乎,,,但我不听!我就是要发新博客QAQ!(理不直气也壮 这题,想明白了还是比较简单的QwQ实现起来似乎也没有很复杂QAQ 首先思考一下,显然 ...
- 关于sed -i 修改selinux 的软链接文件的问题
关于sed -i 修改selinux 的软链接文件的问题 http://blog.csdn.net/kumu_linux/article/details/8598005 因为sed -i /etc/s ...
- java-mybaits-00103-入门程序原生的【查、增、删、改】
一.需求 实现以下功能: 根据用户id查询一个用户信息 根据用户名称模糊查询用户信息列表 添加用户 更新用户 删除用户 二.具体步骤 1.增加pom引用 2.增加log4j.properties # ...
- mysql++使用
Mysql++是官方发布的.一个为MySQL设计的C++语言的API.Mysql++为Mysql的C-Api的再次封装,它用STL(Standard Template Language)开发并编写,并 ...
- Swagger生成的接口需要权限验证的处理方法
通常开发API的时候需要对接口进行权限验证,而我们在使用Swagger生成接口文档界面的时候,直接调用需要权限验证的接口会提示"当前用户没有登陆" 为了解决此问题,我们需要更改一下 ...
- 算法第四版 在Linux 中调用Algs4库
一: 搭建Java 环境 : 确认版本: 1.8及以上 [username:~/] javac -version javac 1.8.0_111 [username:~/] java -versi ...
- NiFi REST API 的使用
一.概述 为方便用户使用 NiFi 进行二次开发,NiFi 为开发者提供了 NIFI REST API. 关于 API 的详细介绍,请参见官网 NIFI REST API.这里仅给出一些注意的小细节. ...
- 理解Linux系统中的load average(图文版)
本文转自:http://heipark.iteye.com/blog/1340384 一.什么是load average? linux系统中的Load对当前CPU工作量的度量 (WikiPedia: ...