如何在livewire中制作一个使用wire:model并将数据返回给父组件的输入组件

Question

我想创建一个可以进行数据绑定的输入组件。我还没有找到很多答案。我知道在Vue 2中，您可以通过编写以下内容使输入组件可绑定：

<template>
<input :value="value" @input="$emit('input', value)"></input>
</template>

我正试图在Livewire中实现类似的目标。到目前为止，所有显示的示例都使用了裸。我希望有以下：

我的输入组件：

<div class="px-4">
@isset($label)
<label for="{{ $for  }}"
class="block mb-2 text-sm font-medium text-gray-400 dark:text-gray-300">{{ $label }}</label>
@endisset
<input type="text" id="{{ $for  }}"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
placeholder="{{ $placeholder ?? '' }}" required wire:model="value">

我的表格：

<div>
<form wire:submit.prevent="save">
@csrf
<livewire:components.form.form-input for="question" label="What is your question?" wire:model.lazy="text">
<x-slot:label>
<em>What is your question?</em>
</x-slot:label>
</livewire:components.form.form-input>
<div class="my-4">
<div class="text-3xl">Options</div>
</div>
<livewire:components.button type="submit" text="Submit"></livewire:components.button>
</form>

该表单使用我的"；表单输入"；分量，并通过一个"；电线：型号.懒惰；论点当我在输入组件中输入文本时；值"；属性。然而，它不会更新父"；问题表格"；。

我已经研究了一些事件，但在将输入值正确地发送回问题表单时遇到了问题。有什么想法吗？

Answer 1

Livewire文档非常清楚，您不应该使用Livewire组件来提取Blade片段。

您为单个输入制作了一个单独的组件。你已经解释了发生了什么。相反，将输入组件转换为Blade组件或零件。然后它将使用Livewire主组件来设置表单值。

如果要继续使用此结构(确实不推荐(，可以在updated方法中使用emitUp，将保存的值发送给父级。