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

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

父组件: 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>

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


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭