子组件通过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. ios-wx.chooseImage选择图片后,在ios中选中的图片未显示

    解决办法:微信引用1.2.0的版本 http://res.wx.qq.com/open/js/jweixin-1.2.0.js 我之前用的版本是:http://res.wx.qq.com/open/j ...

  2. postgresql集群的搭建

    目录 架构图 部署详情 postgresql的安装与配置 pgpool的安装与配置 写在安装前 postgresql是一款很强大的数据库,具体有多强大呢,请谷歌... 网上的相关资料不是很多,参考了大 ...

  3. 19c的 rac在oracle linux7.4上搭建总结

    准备: 1,ASM磁盘空间最低要求OCR的磁盘占用需求有了明显增长.为了方便操作,设置如下:External: 1个卷x40GNormal: 3个卷x30GHight: 5个卷x25GFlex: 3个 ...

  4. 链表两数相加(add two numbers)

    问题 给出两个 非空 的链表用来表示两个非负的整数.其中,它们各自的位数是按照 逆序 的方式存储的,并且它们的每个节点只能存储 一位 数字. 如果,我们将这两个数相加起来,则会返回一个新的链表来表示它 ...

  5. 21次C++作业

    //第一题目 class A //A为基类 {public: void f1( ); int i; protected: void f2(); int j; private: int k; }; /* ...

  6. 分支结构 :if - else

    分支结构 :if - else 格式一: if(条件表达式){ 执行语句; } 格式二:二选一 if(条件表达式){ 执行语句1; }else{ 执行语句2; } 格式三: 多选一 if(条件表达式1 ...

  7. [2019杭电多校第二场][hdu6598]Harmonious Army(最小割)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6598 题意是说一个军队有n人,你可以给他们每个人安排战士或者法师的职业,有m对人有组合技,组合技的信息 ...

  8. Codeforces 979D (STL set)(不用Trie简单AC)

    题面: 传送门 题目大意: 给定一个空集合,有两种操作: 一种是往集合中插入一个元素x,一种是给三个数x,k,s,问集合中是否存在v,使得gcd(x,v)%k==0,且x+v<=s若存在多个满足 ...

  9. C# 中File和FileStream的用法

    原文:https://blog.csdn.net/qq_41209575/article/details/89178020 1.首先先介绍File类和FileStream文件流 1.1  File类, ...

  10. Spring、Spring MVC、Struts2、、优缺点整理(转)

    Spring 及其优点 大部分项目都少不了spring的身影,为什么大家对他如此青睐,而且对他的追捧丝毫没有减退之势呢 Spring是什么: Spring是一个轻量级的DI和AOP容器框架. 说它轻量 ...