子组件通过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. 分布式ID生成器 snowflake(雪花)算法

    在springboot的启动类中引入 @Bean public IdWorker idWorkker(){ return new IdWorker(1, 1); } 在代码中调用 @Autowired ...

  2. vue 路由嵌套 及 router-view vue-router --》children

    vue 路由嵌套 vue-router -->children   在项目的很多子页面中,我们往往需要在同一个页面做一个组件的切换,同时保存这个页面的部分数据(比如树形菜单),进而显示不同的数据 ...

  3. 16 (H5*) JS第6天 日期、字符串、数组

    目录 1:date 2:格式化日期 3:字符串 4:字符串的方法 5:字符串的案例 6:数组的方法 7:包装类型 复习 正文 1:日期:date <script> //创建实例对象 // ...

  4. Lowest Common Ancestor of a Binary Tree(二叉树公共祖先)

    来源:https://leetcode.com/problems/lowest-common-ancestor-of-a-binary-tree Given a binary tree, find t ...

  5. hibernate的get方法和load方法区别

    读者需注意:Hibernate版本不同,运行机制不太一样,以下是hibernate3.x作为讲解 get方法: Hibernate会确认一下该id对应的数据是否存在,首先在session缓存中查找,然 ...

  6. Java集合:Collection、List、Set、Map、泛型

    1.集合的理解和好处 2.集合的框架体系图 ★ 3.Collection接口的特点和使用 ★ 4.List和Set接口的特点和使用★ 5.List接口的实现类学习★ 6.Set接口的实现类学习★ 7. ...

  7. ARM汇编3

    一. 什么是协处理器? 1.1. SoC内部另一处理核心,协助主CPU实现某些功能,被主CPU调用执行一定任务. 1.2. ARM设计上支持多达16个协处理器,但是一般SoC只实现其中的CP15.(c ...

  8. js+css实现点击回到顶部的效果(最低兼容至ie7)

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  9. Untiy3D学习笔记记录

    一,原点和中心点 pivot(原点):位置移动的点(模型的原点不会发生变化) center(中心点):计算模型的中心,会发现变化(比如有两个cube,他的中心点会计算在两个模型的中间) 二,prefa ...

  10. 使用控制台搭建vue-cli脚手架

    注意: 1.安装前您需要查看自己是否有node环境  检查:node - v 2.如果没有的话,需要先搭建好才能进行下一步操作 (参考:https://www.cnblogs.com/sylys/p/ ...