子组件通过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子组件传递数据给父组件的更多相关文章

  1. vue 子组件传递数据跟父组件

    子组件 <body> <div v-on:click="test"></div> <script> export default { ...

  2. vue单文件组件形成父子(子父)组件之间通信(vue父组件传递数据给子组件,子组件传递数据给父组件)

    看了很多文章,官网文档也有看,对父子组件通信说的不是很明白:决定自己总结一下: vue一般都使用构建工具构建项目:这样每个组件都是单文件组件:而网上很多文章都是script标签方式映入vue,组件通信 ...

  3. vue $emit $on 从子组件传递数据给父组件

    原理是: 子组件使用$emit发送数据,父组件使用$on,或者v-on绑定, 来监听子组件发送的数据. 子组件: <button @click="sendChildData" ...

  4. vuejs利用props,子组件修改父组件的数据,父组件修改子组件的的数据,数据类型为数组

    博文参考 传送们点一点 父组件: <template> <div> <aa class="abc" v-model="test" ...

  5. layui中从子窗口传递数据到父窗口,第三个子弹层的值传给第二个弹层

    最近做一个项目的需要多个弹层,每个弹层中还需要数据传递, 经过测试,以下方法三个弹层才有效,如果只是有两个弹层,请用其它方法 大概如图,看图自己应该明白 如何在在b页面选择好的值传给a页面的问题,这个 ...

  6. 前端(二十二)—— vue组件:局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  7. vue 父向子组件传递数据,子组件向父组件传递数据方式

    父组件向子组件传递数据通过props,子组件引入到父组件中,设置一个值等于父组件的数据,通过:bind将数据传到子组件中,子组件中通过props接收父组件的数据,这样就可以使用父组件的数据了,循环组件 ...

  8. VUE中父组件向子组件传递数据 props使用

    VUE中,子组件是不能直接访问父组件的数据(一般来说,当然如果你要破坏原则也是可以),如下< <body> <div id="fathercomponent" ...

  9. Vue : props 使用细节(父组件传递数据给子组件)

    props使用细节 在Vue.js中我们可以使用 props 实现父组件传递数据给子组件,下面我们总结一下props的使用细节 1.基础类型检查 2.必填数据 3.默认值 4.自定义验证函数 其中每一 ...

随机推荐

  1. 【ABAP系列】SAP ABAP 生成随机数的函数

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[MM系列]SAP ABAP 生成随机数的函数 ...

  2. Tensorflow实战(二):Discuz验证码识别

    一.前言 验证码是根据随机字符生成一幅图片,然后在图片中加入干扰象素,用户必须手动填入,防止有人利用机器人自动批量注册.灌水.发垃圾广告等等 . 验证码的作用是验证用户是真人还是机器人. 本文将使用深 ...

  3. ecshop注册用户增加手机验证功能

    1.去掉“用户名”注册 a.去掉提交 user_passport.dwt页面去掉 <input name="username" type="text" s ...

  4. python+selenium元素定位之CSS学习02

    参考文档:https://www.runoob.com/cssref/css-selectors.html CSS选择器用于选择你想要的元素的样式的模式. "CSS"列表示在CSS ...

  5. Varint数值压缩存储方法

    coming from http://www.cnblogs.com/smark/archive/2012/05/03/2480034.html 在编写网络通讯的时候我们经常需要把一些数据存储到byt ...

  6. Acwing‘803. 区间合并

    (https://www.acwing.com/problem/content/805/) 给定 nn 个区间 [li,ri][li,ri],要求合并所有有交集的区间. 注意如果在端点处相交,也算有交 ...

  7. P1828 香甜的黄油 (spfa)

    [题目描述] 农夫John知道每只奶牛都在各自喜欢的牧场(一个牧场不一定只有一头牛).给出各头牛在的牧场和牧场间的路线,找出使所有牛到达的路程和最短的牧场(他将把糖放在那). [题目链接] https ...

  8. webpack打包过程及开发过程

    1.传统: 1)分模块去定义js.js中要导出将来要被打包的方法module.exports 2)定义main.js入口文件(主文件).在此文件中,导入引用的js文件 var {add} = requ ...

  9. JAVA对象序列化和反序列化学习

    JAVA序列化就是将JAVA对象转化为字节序列的过程,而JAVA反序列化就是将字节序列转化为JAVA对象的过程. 这一过程是通过JAVA虚拟机独立完成,所以一个对象序列化后可以在任意时间和任意机器上反 ...

  10. MySQL 保存镜像实战操作( 拷贝方法 )

    查看数据保存的位置 docker inspect --format='{{.Mounts}}' mxg_mysql 容器路径为:`/var/lib/mysql` ,宿主机数据保存在: /var/lib ...