从vue组件子组件获取数据并绑定到父组件中的对象

Question

<user-data @change="setUserInfo"></user-data"> --这是使用emits传递数据的子组件。

下面是父组件的方法。

 setUserInfo(data) {
   this.obj.payment_details = data;
 },

可以从上面的方法绑定数据吗？

export default {
    data: () => ({
        dialog: false,
        obj: new Expense(),
        saveLoader: false,
    }),
}

Answer 1

这里有一个关于如何从子组件向父组件发出数据的示例(使用Vue3组合API脚本设置)：

父级：

<template>
  <Comp @my-var="callback" />
  
  {{ test }}
</template>

<script setup>
import { ref } from 'vue'
import Comp from './Comp.vue'
const test = ref('')

const callback = data => test.value = data
</script>

儿童：

<template>
<button
  v-text="'click'"
  @click="doEmit()"
/>
</template>

<script setup>
const emits = defineEmits(['myVar'])

const doEmit = () => emits('myVar', 'emiting this data')
</script>

查看游乐场