Vue组件向视图传值及addCustomer函数调用失效问题求助

我是Vue新手，正在尝试把组件数据传递到视图，不确定props使用是否正确。现在有一个对话框组件，点击保存按钮需要把数据插入数据库，为了复用addCustomer()函数，我把它放在了父页面而不是组件里，但对话框的Save按钮点击后没反应，Cancel按钮可以正常工作。

现有代码 #

pages/customers.vue #

<template>
  <div>
    <div class="items-center justify-between md:flex">
      <Heading
        title="Customers"
        desc="The list of customers or companies you work with."
      />
      <button @click="openModal" class="btn-primary">Add New Customer</button>
    </div>

    <CustomerList class="mt-4" :customers="customers" />
  </div>
  <CustomerDialog
    :is-open="isOpen"
    :close-modal="closeModal"
    :open-modal="openModal"
    :name="name"
    :address="address"
    :email="email"
    :add-customer="addCustomer"
  />
</template>

<script setup>
const client = useSupabaseClient();

const name = ref("");
const address = ref("");
const email = ref("");

const isOpen = ref(false);

function closeModal() {
  isOpen.value = false;
}
function openModal() {
  isOpen.value = true;
}

const { data: customers } = await useAsyncData("customers", async () => {
  const { data } = await client.from("customers").select("*");
  return data;
});

async function addCustomer() {
  if (name.value == "" || address.value == "" || email.value == "") return;

  const { data } = await client.from("customers").upsert({
    name: name.value,
    address: address.value,
    email: email.value,
  });
  customers.value.push(data[0]);
  name.value = "";
  address.value = "";
  email.value = "";
  closeModal();
}
</script>

components/customer/Dialog.vue #

<template>
    <Dialog as="div" @close="closeModal" class="relative z-10">
        <input type="text" id="name" v-model="name" />
        <input type="text" id="address" v-model="address" />
        <input type="email" id="email" v-model="email" />
        <button type="button" @click="addCustomer">Save</button>
        <button type="button" @click="closeModal">Cancel</button>
    </Dialog>
</template>

<script setup>
defineProps([
  "name",
  "address",
  "email",
  "addCustomer",
  "isOpen",
  "closeModal",
  "openModal",
]);
</script>

问题根源 #

1. Props单向数据流冲突：父组件将name/address/email这些响应式变量作为props传给子组件，子组件用v-model直接绑定修改，违反了Vue单向数据流规则（props只读），导致数据更新异常，父组件的addCustomer无法获取到最新的表单值，触发空值判断直接返回。
2. 方法传递的隐性问题：虽然addCustomer作为props传递给子组件，但由于数据绑定失效，方法执行逻辑未被触发。

修复方案（符合Vue最佳实践） #

采用子组件维护本地状态+事件触发父组件方法的方式，避免props直接修改问题。

修改后父页面（pages/customers.vue） #

<template>
  <div>
    <div class="items-center justify-between md:flex">
      <Heading
        title="Customers"
        desc="The list of customers or companies you work with."
      />
      <button @click="openModal" class="btn-primary">Add New Customer</button>
    </div>

    <CustomerList class="mt-4" :customers="customers" />
  </div>
  <CustomerDialog
    :is-open="isOpen"
    @close-modal="closeModal"
    @add-customer="addCustomer"
  />
</template>

<script setup>
const client = useSupabaseClient();

const isOpen = ref(false);

function closeModal() {
  isOpen.value = false;
}
function openModal() {
  isOpen.value = true;
}

const { data: customers } = await useAsyncData("customers", async () => {
  const { data } = await client.from("customers").select("*");
  return data;
});

async function addCustomer(formData) {
  const { name, address, email } = formData;
  if (!name || !address || !email) return;

  const { data } = await client.from("customers").upsert({ name, address, email });
  customers.value.push(data[0]);
  closeModal();
}
</script>

修改后子组件（components/customer/Dialog.vue） #

<template>
    <Dialog as="div" @close="handleClose" class="relative z-10">
        <input type="text" id="name" v-model="name" />
        <input type="text" id="address" v-model="address" />
        <input type="email" id="email" v-model="email" />
        <button type="button" @click="handleSave">Save</button>
        <button type="button" @click="handleClose">Cancel</button>
    </Dialog>
</template>

<script setup>
import { ref } from 'vue';

// 子组件本地维护表单状态
const name = ref("");
const address = ref("");
const email = ref("");

// 定义需要触发的父组件事件
const emit = defineEmits(['add-customer', 'close-modal']);

function handleSave() {
    // 触发事件并传递表单数据给父组件
    emit('add-customer', {
        name: name.value,
        address: address.value,
        email: email.value
    });
}

function handleClose() {
    emit('close-modal');
    // 清空本地表单数据
    name.value = "";
    address.value = "";
    email.value = "";
}

// 接收控制对话框显示的props
defineProps(['isOpen']);
</script>

修复说明 #

• 子组件内部维护表单状态，通过defineEmits定义事件，点击按钮时触发事件并传递数据给父组件，符合Vue单向数据流规则。
• 父组件通过监听子组件事件调用addCustomer，确保能获取到最新的表单值执行数据库操作。
• Cancel按钮触发关闭事件的同时清空本地表单数据，避免下次打开对话框残留旧数据。

内容的提问来源于stack exchange，提问作者Larra