vue实现子组件值传给父组件用深拷贝
时间: 2023-09-12 09:02:50 浏览: 36
在 Vue 中,子组件向父组件传递数据有两种方式:
1. 使用 $emit() 方法触发自定义事件,在父组件中通过监听该事件来获取子组件传递的数据。
2. 使用 v-model 双向绑定语法,将子组件的数据绑定到父组件中。
无论哪种方式,如果子组件传递的数据是一个对象或数组,为了避免父组件修改了该数据影响到子组件的数据,我们需要进行深拷贝。
下面是一个使用 $emit() 方法传递数据的例子:
```html
<!-- 子组件 -->
<template>
<div>
<button @click="sendData">传递数据</button>
</div>
</template>
<script>
export default {
data() {
return {
obj: { name: 'Tom', age: 18 }
}
},
methods: {
sendData() {
// 触发自定义事件,并传递数据
this.$emit('send-data', JSON.parse(JSON.stringify(this.obj)))
}
}
}
</script>
```
```html
<!-- 父组件 -->
<template>
<div>
<child-component @send-data="getData"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
methods: {
getData(data) {
// 接收子组件传递的数据,并进行深拷贝
const newData = JSON.parse(JSON.stringify(data))
// 对新的数据进行操作,不会影响到子组件的数据
newData.age = 20
}
}
}
</script>
```
使用 v-model 双向绑定语法传递数据的例子也类似,只需要在子组件中使用 $emit() 方法触发 input 事件即可:
```html
<!-- 子组件 -->
<template>
<div>
<input v-model="value" @input="sendData" />
</div>
</template>
<script>
export default {
data() {
return {
value: ''
}
},
methods: {
sendData() {
// 触发 input 事件,并传递数据
this.$emit('input', JSON.parse(JSON.stringify(this.value)))
}
}
}
</script>
```
```html
<!-- 父组件 -->
<template>
<div>
<child-component v-model="data"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: {
ChildComponent
},
data() {
return {
data: ''
}
}
}
</script>
```
在父组件中修改 data 的值时,也需要进行深拷贝,以避免影响到子组件的数据。