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

父组件: father.vue

  <template>  
      <child @toFather="fromChild(arr)"></child>
  <template>  
  <script>  
  import child from 'child.vue'
 export default {  
    components: {
    	child
   },
   methods:{  
     fromChild (arr) {
       console.log(arr);
     }
   }  
 }  
</script>  
子组件:child.vue
<template>  
   <div>  
    <button @click="toFather"></button>
   </div>  
</template>  
<script>  
 export default {  
   methods:{  
     toFather () {
       let arr = [1,2,3,4]
       this.$emit('toFather', arr)
     } 
   }  
 }  
</script>  
结果弄了老半天,发现子组件传给父组件的一直是一个 vue 对象,而不是 想要的数组。

解决:

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

  <template>  
  -    <child @toFather="fromChild(arr)"></child>
  +    <child @toFather="fromChild"></child>
  <template>  
  <script>  
  import child from 'child.vue'
  export default {  
   components: {
    	child
   },
   methods:{  
     fromChild (arr) {
     	console.log(arr);
     }
   }  
 }  
</script>  
不要在
<child @toFather="fromChild"></child>
中添加参数,这样就能获得想要的  子组件传递过来的参数了。

 

Logo

前往低代码交流专区

更多推荐