子组件通过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. Log4net使用(一)

    转自:http://blog.csdn.net/much0726/article/details/3725563 转自:https://q.cnblogs.com/q/52302/ log4net,既 ...

  2. 百度文档,用Python一键免费下载

    百度文库下载需要券,或者vip才能下载 Vip价格高,偶尔下载一次不划算. 不下载复制?不好意思复制也需要vip否则只能一次复制两行. 如何才能以最低成本获取到百度文库里的文档内容呢? 当然是用Pyt ...

  3. poj 2248 Addition Chains (迭代加深搜索)

    [题目描述] An addition chain for n is an integer sequence with the following four properties: a0 = 1 am ...

  4. 树莓派上编译安装python3.6

    1.更新树莓派系统 sudo apt-get update sudo apt-get upgrade -y 2.安装python依赖环境 sudo apt-get install build-esse ...

  5. 看漫画就能学SQL,简直太cool了

    对于SQl, 很多人学不会的原因是从一开始就没明白,学这东西能干啥,学会了能有什么用.甚至有些人不知道'SQL'应该怎么读,以至于一开始兴致勃勃,但是学到一半放弃了. 注意:'sql'真的不能读成'烧 ...

  6. hadoop HA + HBase HA搭建:

    hadoop HA搭建参考:https://www.cnblogs.com/NGames/p/11083640.html (本节:用不到YARN 所以可以不用考虑部署YARN部分) Hadoop 使用 ...

  7. python-验证功能的装饰器示例

    user_list=[ {'}, {'}, {'} ] current_dict={'username':None,'login':False} def auth(auth_type): def au ...

  8. Codeforces Round #425 (Div. 2) - A

    题目链接:http://codeforces.com/contest/832/problem/A 题意:有n个棍子,两个人轮流取这些棍子,每个人每次只能去恰好k个棍子(不足k个则不能取),问先手取的棍 ...

  9. break语句、continue语句、goto语句的用法辨析

    1.break语句 break语句常使用在switch语句.循环体以及if语句中,它的作用是跳出循环,而且只能跳出一层循环. for (i = 0; i < 10; ++j) { for (j ...

  10. Email常用缩写

    Abbreviations Used in email Abbreviation Meanings ATM at the moment AFAIK as far as I know BTW by th ...