Vue子组件传递数据给父组件
子组件通过this.$emit(event,data)传递数据到父组件
以下是例子:
father.vue 父组件
<template>
<div>
<child @newNodeEvent="getChildData" />
</div>
</template>
<script>
import child from './components/child'
export default {
components: {
child
},
methods: {
getChildData(value) {
alert(value)
}
}
}
</script>
child.vue 子组件
<template>
<div>
<input type="button" @click="toFather" value="子传父" />
</div>
</template> <script>
export default {
methods: {
toFather() {
this.$emit('newNodeEvent', '子元素到父元素')
}
}
}
</script>
Vue子组件传递数据给父组件的更多相关文章
- vue 子组件传递数据跟父组件
子组件 <body> <div v-on:click="test"></div> <script> export default { ...
- vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)
看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...
- vue $emit $on 从子组件传递数据给父组件
原理是: 子组件使用$emit发送数据,父组件使用$on,或者v-on绑定, 来监听子组件发送的数据. 子组件: <button @click="sendChildData" ...
- vuejs利用props,子组件修改父组件的数据,父组件修改子组件的的数据,数据类型为数组
博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...
- layui中从子窗口传递数据到父窗口,第三个子弹层的值传给第二个弹层
最近做一个项目的需要多个弹层,每个弹层中还需要数据传递, 经过测试,以下方法三个弹层才有效,如果只是有两个弹层,请用其它方法 大概如图,看图自己应该明白 如何在在b页面选择好的值传给a页面的问题,这个 ...
- 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList
Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...
- vue 父向子组件传递数据,子组件向父组件传递数据方式
父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...
- VUE中父组件向子组件传递数据 props使用
VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent" ...
- Vue : props 使用细节(父组件传递数据给子组件)
props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...
随机推荐
- django基于odm,简单的post和get封装
- Lucene的步骤
// 1. 采集数据 BookDao bookDao = new BookDaoImpl(); List<Book> bookList = bookDao.queryBookList(); ...
- LeNet-5详解
一.前言 LeNet-5出自论文Gradient-Based Learning Applied to Document Recognition,是一种用于手写体字符识别的非常高效的卷积神经网络. 本文 ...
- ArrayList,linkedList vecator的实现和区别
1.线程安全问题. ArrayList 和 linkedList 线程是不安全的,而vecator是线程安全的. 因为ArrayList 和 linkedList 是线程不同步的,vecator是同步 ...
- 编码规范(code style guide)
1. Javascript Google: https://google.github.io/styleguide/jsguide.html Airbnb:https://github.com/air ...
- SpringBoot 参数检查 Controller中检查参数是否合法
springboot 验证 默认使用的是hibernate validator ,不用额外增加引用包,springboot已经内置包含. 设置pom相关依赖 <?xml version=&quo ...
- JAVA总结--dubbo与zookeeper
读累了就看看实操https://www.cnblogs.com/huasky/p/10214642.html 一.SOA 概念:SOA:Service-Oriented Architecture,面向 ...
- spring注解之@Scope
转自:https://blog.51cto.com/4247649/2118351 作者:知了123 主要从以下几方面来介绍一下@Scope注解 @Scope注解是什么 @Scope注解怎么使用 @S ...
- C/C++表达式求值问题
转载:https://originlee.com/2016/05/01/eval-expression-in-c-and-cpp/ 前几日,一个刚学编程的老朋友问了我一个问题: int i = 0;i ...
- HDU-2571 命运(搜索,我才不是为了插图呢!哼!)
看到这题其实感觉就是搜索题,广搜的话看讨论区里已经有人内存超限了,所以我选择了深搜,有两种思路,第一种是从起点出发,依次更新每一个格子的最大值,这样dp[n][m]就是最后的结果了,第二种是从起点试探 ...