vue2点击一次生成一个新的相同的子组件且 父传子组件之间传值不会有影响
时间: 2023-11-03 18:58:25 浏览: 102
可以通过在子组件中使用props来实现父传子组件之间传值不会有影响。
具体实现步骤如下:
1. 在父组件中定义一个变量,用来控制是否生成新的子组件。
```
<template>
<div>
<button @click="addNewChild">Add New Child</button>
<div v-for="(item, index) in list" :key="index">
<child-component :msg="item"></child-component>
</div>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
list: ['Hello', 'Vue', 'World'],
showChild: true // 控制是否生成新的子组件
}
},
methods: {
addNewChild() {
this.list.push('New Child')
this.showChild = !this.showChild // 点击按钮后改变showChild的值
}
}
}
</script>
```
2. 在子组件中使用props接收父组件传递过来的值,并在模板中显示。
```
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
props: {
msg: String // 接收父组件传递过来的值
}
}
</script>
```
这样,每次点击按钮后,都会生成一个新的相同的子组件,并且父传子组件之间传值不会有影响。