如何在循环中使用 $emit 将数组值传递给父组件?

huangapple go评论76阅读模式
英文:

How do I use $emit in the loop to pass the array value to the parent?

问题

子组件将通过循环将值传递给父组件
然后父组件将对该值执行某些操作

我犯了一个错误,父组件无法接收子组件,每个传递的值都会丢失

子组件

let array = [{a: '1', b: '2'}, {a: '3', b: '4'}, {a: '5', b: '6'}, {a: '1', b: '2'}, ....]
for (let index in array) {
    this.$emit('update', array[index])
}

父组件

update(product) {
    console.log(product);
}

在我的控制台中,我只能获取到部分子组件传递的值

这是什么错误,我该如何修复它?

这是我的示例,尽管无法重现错误,但代码是相同的,只是父组件没有显示所有内容。

示例链接

英文:

The child component will pass the value to the parent component through a loop
And the parent component will do something with the value

I have a mistake, the parent component cannot receive the child component, and each passed value will be missing

child component

 let array =[{a:'1',b:'2'},{a:'3',b:'4'},{a:'5',b:'6'},{a:'1',b:'2'},....]
 for(let index in array){
     this.$emit('update', array[index])
 }

parent component

 update(product) {
     console.log(product);
 }

In my console I can only get part of the children pass value

What is this error and how can I fix it?

This is my sample, although the error cannot be reproduced, the code is the same, except that the parent does not display all

example

答案1

得分: 1

Your code should work fine, I did not see any issue in your code. I am assuming you are capturing the event emitted from the child into the parent component like this.

<child @update="update"></child>

Working Demo :

Vue.component('child', {
  data() {
    return {
      arr: [{a:'1',b:'2'}, {a:'3',b:'4'}, {a:'5',b:'6'},{a:'1',b:'2'}]
    }
  },
  mounted() {
    for(let index in this.arr){
      this.$emit('update', this.arr[index])
    }
  }
});

var app = new Vue({
  el: '#app',
  methods: {
    update(product) {
      console.log(product);
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0/vue.js"></script>
<div id="app">
  <child @update="update"></child>
</div>

Suggestion : To improve the performance, Instead of emitting each element into the parent component, My suggestion would be to pass the whole array and then do the data manipulations in the parent component itself.

英文:

Your code should work fine, I did not see any issue in your code. I am assuming you are capturing the event emitted from the child into the parent component like this.

&lt;child @update=&quot;update&quot;&gt;&lt;/child&gt;

Working Demo :

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

Vue.component(&#39;child&#39;, {
  data() {
    return {
      arr: [{a:&#39;1&#39;,b:&#39;2&#39;}, {a:&#39;3&#39;,b:&#39;4&#39;}, {a:&#39;5&#39;,b:&#39;6&#39;},{a:&#39;1&#39;,b:&#39;2&#39;}]
    }
  },
  mounted() {
    for(let index in this.arr){
      this.$emit(&#39;update&#39;, this.arr[index])
    }
  }
});

var app = new Vue({
  el: &#39;#app&#39;,
  methods: {
  	update(product) {
    	console.log(product);
    }
  }
});

<!-- language: lang-html -->

&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0/vue.js&quot;&gt;&lt;/script&gt;
&lt;div id=&quot;app&quot;&gt;
  &lt;child @update=&quot;update&quot;&gt;&lt;/child&gt;
&lt;/div&gt;

<!-- end snippet -->

Suggestion : To improve the performance, Instead of emitting each element into parent component, My suggestion would be to pass whole array and then do the data manipulations in the parent component itself.

huangapple
  • 本文由 发表于 2023年1月6日 14:53:12
  • 转载请务必保留本文链接:https://go.coder-hub.com/75027839.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定