子组件通过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. idea的类头注释和方法注释的编辑

    一:配置类头注释 1:点击file,点击settings 2:点击editor,选择 file and code template ,然后看右侧部分点击include,之后选中File Header ...

  2. Python - pycharm 代码自动补全

    有很多人说是代码补全功能未打开,的确,代码补全功能确实要打开才能用,打开方法 file---->power save mode,把这个前面的√号去掉即可

  3. [Python3 练习] 005 汉诺塔1 递归解法

    题目:汉诺塔 I (1) 描述 传说,在世界中心贝拿勒斯(在印度北部)的圣庙外有左中右三根足够长的柱子(塔) 左边柱子上套着 64 片金片,金片按"上小下大"排,其余两根是空柱子 ...

  4. [Python3 填坑] 007 多才多艺的 len()

    目录 1. print( 坑的信息 ) 2. 开始填坑 (1) 总的来说 (2) 举例说明 (3) 后记 1. print( 坑的信息 ) 挖坑时间:2019/01/10 明细 坑的编码 内容 Py0 ...

  5. mysql字符串拆分实现split功能

    转自:https://blog.csdn.net/pjymyself/article/details/81668157有分隔符的字符串拆分题目要求数据库中 num字段值为: 实现的效果:需要将一行数据 ...

  6. SpringBoot 整合 MybatisPlus (项目的创建及简单的单表查询)

    添加依赖 <!--mybatis-plus的springboot支持--> <dependency> <groupId>com.baomidou</group ...

  7. POJ 1383题解(树的直径)(BFS)

    题面 Labyrinth Time Limit: 2000MS Memory Limit: 32768K Total Submissions: 4997 Accepted: 1861 Descript ...

  8. [AGC005F] Many Easy Problems

    link 题意简述 给定一颗无根树,对于所有大小为 $i$ 的点集,求出能够包含它的所有联通块之和,定义为 $f_i$ ,答案对 $924844033$ 取模. $n\leq 2\times 10^5 ...

  9. Photoshop制作Android UI:怎样从大图片中准确剪切出圆角正方形 图片

    如题所看到的,最初我是直接用PS的剪切工具,但发现有时不太好用. 由于你必须提前设好要剪切的尺寸. 也可能是我这小白不知道咋用. 下为摸索到的最好方法: 1.打开原图.新建图层,假设是png图片就不用 ...

  10. IIS是怎么处理多个请求的?

      一,假设有一台服务器,它的IIS上部署有一个Web应用程序-S,可以通过浏览器或其他方式进行访问.     假设有A.B.C三台电脑同时访问网站S,IIS接收到3个HTTP请求,然后分别为三个请求 ...