function handleDetail(row: any) { data.value.formModeProps.id = row.id data.value.formModeProps.visible = true if (row.isCompleted !== '未回款') { data.value.disabled = true } else { data.value.disabled = false } }这段代码是VUE3写在父组件的,子组件如何返回值给父组件这个方法进行处理
时间: 2023-05-22 22:05:25 浏览: 92
子组件可以通过 $emit 事件向父组件传递值,比如像这样:
在子组件中:
```
// 子组件中
methods: {
handleClick() {
const row = { id: 123, isCompleted: '未回款' }
this.$emit('updateDetail', row)
}
}
```
在父组件中:
```
// 父组件中
<template>
<div>
<button @click="showDetail">显示详情</button>
<child-component @updateDetail="handleDetail"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'
export default {
components: { ChildComponent },
data() {
return {
data: {
value: {
formModeProps: {
id: '',
visible: false,
},
disabled: false,
},
},
}
},
methods: {
showDetail() {
const row = { id: 123, isCompleted: '未回款' }
this.handleDetail(row)
},
handleDetail(row) {
this.data.value.formModeProps.id = row.id
this.data.value.formModeProps.visible = true
if (row.isCompleted !== '未回款') {
this.data.value.disabled = true
} else {
this.data.value.disabled = false
}
},
},
}
</script>
```
当子组件中的 handleClick 方法被调用时,会通过 $emit 方法触发 updateDetail 事件,并将 row 对象作为参数传递给父组件中的 handleDetail 方法,从而实现了子组件向父组件传递值的功能。
阅读全文