请求Vuetify 3.4.3子组件向父组件单向传递输入文本的示例

父组件代码 #

<script setup lang="ts">
import { ref } from "vue";
import Buscador from "./Buscador.vue"; // 按需调整组件引入路径

const texto = ref<string>("");

// 接收子组件传递的文本
const handleTextSubmitted = (value: string) => {
  texto.value = value;
};
</script>

<template>
  <div>
    <p>父组件接收的文本: {{ texto }}</p>
    <Buscador @text-submitted="handleTextSubmitted" />
  </div>
</template>

子组件代码（Buscador.vue） #

<script setup lang="ts">
import { ref, watch } from "vue";

// 子组件内部独立维护输入状态
const texto = ref<string>("");

// 定义自定义事件，用于向父组件传递数据
const emits = defineEmits<{
  (event: "text-submitted", value: string): void;
}>();

// 监听输入值变化，满足条件时触发事件传递数据
watch(texto, (newValue) => {
  if (newValue.length > 3) {
    emits("text-submitted", newValue);
  }
});
</script>

<template>
  <v-text-field
    v-model="texto"
    label="输入文本（长度>3时传递给父组件）"
    variant="outlined"
  ></v-text-field>
</template>

核心说明 #

• 单向数据流逻辑：子组件完全自主管理自身输入状态，仅在满足业务条件（文本长度>3）时，通过自定义事件text-submitted将数据传递给父组件；父组件仅负责接收数据，不会反向修改子组件的输入框内容。
• 与双向绑定的区别：原双向绑定通过v-model依赖modelValue属性和update:modelValue事件实现父子状态同步，而单向绑定是纯粹的子→父单向数据传递，父组件不干预子组件内部状态。
• 代码优化：使用watch监听输入值变化更简洁，同时修正了原代码中texto = $event的错误（ref类型值需通过.value修改）。

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