如何防止 Vue.js 中循环组件的数据/方法共享

Question

我有 vue 组件，$emit 到 component 中，让它从组件返回数据。我将使用该组件来更新当前页面的数据。以下代码

模板：

<Testing
@update="update">
</Testing>
<AnotherComponent
:data="text"
>
</AnotherComponent>

脚本：

method(){
update: function(data){
this.text = data.text
}
}

如果只有这个，它就可以完美地工作。

现在，我需要制作一个按钮来再添加一个组件。 我使用 for 循环来执行此操作。

模板

<div v-for="index in this.list">
<Testing
:name="index"
@update="update">
</Testing>
<AnotherComponent
:data="text"
>
</AnotherComponent>
</div>

脚本：

method(){
addList : function(){
this.list +=1;
},
deleteList : function(){
this.list -=1;
},
update: function(data){
this.text = data.text
}
}

添加和删除功能完美运行。 然而，它们共享"更新"方法和"文本"数据。 所以，如果我改变第二个组件，第一个组件也会改变。 我认为这不是复制组件的好主意。

以下是我的要求。

1. 此组件是表单的一部分，因此它们应具有不同的名称来提交表单。

另一个组件">

2. 将使用来自"测试组件"的数据来做某事。 "测试"和"另一个组件"应该分组，并且不会更改另一个组的任何数据。

任何人都可以给我建议如何改进这些代码？谢谢

Answer 1

发生的情况是两者都使用来自父级的数据，并更新相同的数据。

您似乎正在进行某种自定义输入。在这种情况下，在子组件中，您可以使用"value"属性和"input"事件，并在父用户v模型中跟踪该特定数据数据。

子组件 BaseInput.vue：

<template>
<div>
<input type="text" :value="value" @keyup="inputChanged">
</div>
</template>
<script>
export default {
props: ['value'],
data () {
return {
}
},
methods: {
inputChanged (e) {
this.$emit('input', e.target.value)
}
}
}
</script>

这是父级上的代码：

<template>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3">
<base-input v-model="firstInputData"></base-input>
<p>{{ firstInputData }}</p>
<hr>
<base-input v-model="secondInputData"></base-input>
<p>{{ secondInputData }}</p>
</div>
</div>
</div>

<script>
import BaseInput from './BaseInput.vue'
export default {
components: {BaseInput},
data() {
return{
firstInputData: 'You can even prepopulate your custom inputs',
secondInputData: ''
}
}
}
</script>

在父级中，您可以真正将不同的模型作为属性存储在对象中，并将该对象传递给"另一个组件"，将它们作为单独的道具传递......传递数组....