vue $emit 接收不到子组件的数据

原创 2018年04月17日 10:56:46

最近碰到个问题,搞了老半天发现问题所在哭笑不得,在这里记录一下。

父组件: father.vue

 1 <template>  
 2     <child @toFather="fromChild(arr)"></child>
 3 <template>  
 4 <script>  
 5 import child from 'child.vue'
 6 export default {  
 7   components: {
 8   	child
 9   },
10   methods:{  
11     fromChild (arr) {
12       console.log(arr);
13     }
14   }  
15 }  
16 </script>  

子组件:child.vue

 1 <template>  
 2   <div>  
 3     <button @click="toFather"></button>
 4   </div>  
 5 </template>  
 6 <script>  
 7 export default {  
 8   methods:{  
 9     toFather () {
10       let arr = [1,2,3,4]
11       this.$emit('toFather', arr)
12     } 
13   }  
14 }  
15 </script>  

结果弄了老半天,发现子组件传给父组件的一直是一个 vue 对象,而不是 想要的数组。

解决:

不要在父组件的 函数中添加 参数如下

 1 <template>  
 2 -    <child @toFather="fromChild(arr)"></child>
 3 +    <child @toFather="fromChild"></child>
 4 <template>  
 5 <script>  
 6 import child from 'child.vue'
 7 export default {  
 8   components: {
 9   	child
10   },
11   methods:{  
12     fromChild (arr) {
13     	console.log(arr);
14     }
15   }  
16 }  
17 </script>  

不要在

<child @toFather="fromChild"></child>

中添加参数,这样就能获得想要的  子组件传递过来的参数了。


vue使用$emit时,父组件无法监听到子组件的事件

vue使用$emit时,父组件无法监听到子组件的事件的原因是$emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名 {{ total }} ...
  • l741210724
  • l741210724
  • 2017-07-05 16:14:22
  • 3049

vue---父调子 $refs (把父组件的数据传给子组件)子调父 $emit (把子组件的数据传给父组件)

ps:App.vue 父组件   Hello.vue 子组件 App.vue : import hello from './components/Hello' expor...
  • sinat_17775997
  • sinat_17775997
  • 2017-03-02 08:58:10
  • 1559

vue2中子组件修改父组件传入的prop,并向父组件$emit一个广播事件

1、在vue中:        prop 是单向绑定的:当父组件的属性变化时,将传导给子组件,但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。   ...
  • Take_Dream_as_Horse
  • Take_Dream_as_Horse
  • 2017-04-26 10:51:52
  • 4224

前端框架Vue(8)——子父组件的传参通信

父子间的通信传值是 vue 中的一个重要的内容和掌握点。  *vue2.0 推荐使用 vuex,全局进行状态管理。(后面再讲)  首先讲一下遇到的 需求背景: 解释一下:   组件之间的关系: ...
  • DOCALLEN
  • DOCALLEN
  • 2017-04-14 15:26:40
  • 14346

父子组件通信-$emit

父子组件使用$emit和v-on时,子组件使用$emit触发,父组件在实例中v-on自定义事件监听。 注意:父组件监听子组件触发的事件,不能用$on侦听子组件抛出的事件,而必须在模板里直接用v-on...
  • zx_p24
  • zx_p24
  • 2017-07-04 10:39:24
  • 2663

Vue.js父组件$on无法监听子组件$emit触发事件解决办法

Vue.js父组件$on无法监听子组件$emit触发事件解决办法 最近学习vuejs看例子中用$on无法监听子组件$emit触发事件: 使用版本 vue.js 2.2.5 参考文献 1....
  • wo_buzhidao
  • wo_buzhidao
  • 2018-03-05 19:35:28
  • 154

Vue $emit()不触发方法的原因

vue使用$emit时,父组件无法监听到子组件的事件的原因是:$emit传入的事件名称只能使用小写,不能使用大写的驼峰规则命名...
  • panyang01
  • panyang01
  • 2017-08-29 11:48:37
  • 1795

[vue.js]解决子组件无法获取父组件store中的值的问题

子组件的参数值如何随着父组件store中参数值的变化而变化
  • u012837829
  • u012837829
  • 2017-04-06 16:51:47
  • 189

Vue2实现子组件改变父子组件的数据

制作组件的时候大部分情况需要在子组件内部改变父组件的数组,但是由于vue的限制,在子组件改变父组件的state会报错,本文介绍如何利用v-model实现父子组件的数据双向绑定。 本文环境 -...
  • qq_25243451
  • qq_25243451
  • 2017-11-29 13:37:04
  • 361
收藏助手
不良信息举报
您举报文章:vue $emit 接收不到子组件的数据
举报原因:
原因补充:

(最多只允许输入30个字)