Livewire 3嵌套组件属性传递无法实时更新问题求助

我正在构建一个包含地址区域的表单，用户可在不知道邮政编码时进行搜索。结构如下：

• 父Livewire组件CreateUser包含整个表单：
  • 组件将所有表单字段设为属性，比如public string $address_city;等
  • 所有输入框均绑定对应的wire:model
• 子Livewire组件PostalCodeSearch作为模态框内容：
  • 组件包含API搜索邮政编码所需的$state、$city、$street三个属性
  • mount()方法调用搜索API并将结果返回至视图

在create-user.blade.php中，我实现了Pines模态框，调用方式如下：

<button type="button" @click="modalOpen = true">Search Postal Code</button>
<template x-teleport="body">
  <livewire:admin.postal-code-search :state="$address_state" />
</template>

注意:state="$address_state"，这是我尝试向子组件传递父组件属性的方式。初始在父组件中设置默认值（如public $address_state = 'es'）时有效，但父组件属性变更后，子组件无法实时更新。

我查阅了嵌套组件的文档及相关视频，但内容多围绕Alpine中使用$parent的场景，不符合我的情况，特此求助。

父组件：Livewire/Admin/CreateUser.php #

<?php

namespace App\Livewire\Admin;

use Livewire\Component;

class CreateUser extends Component
{
    public string $address_country;
    public string $address_state;
    public string $address_city;
    public string $address_postalcode;
    public string $address_street;
    public string $address_number;

    public function render()
    {
        return view('admin.livewire.user.create');
    }
}

父组件视图：views/admin/livewire/user/create.blade.php #

<form>
    <fieldset>
        <div 
            x-ref="address_container"
            x-data="{
                modalOpen: false,
            }"
            @keydown.escape.window="modalOpen = false"
        >
            <label>Country</label>
                <select wire:model='address_country' x-ref="country_select">
                    <option value="bra">Brazil</option>
                    <!-- ... -->
                </select>
            <label>State</label>
                <select wire:model='address_state' x-ref="state_select">
                    <option value="br-es">Espirito Santo</option>
                    <!-- ... -->
                </select>
            <label>City</label>
                <input type="text" x-ref="city_input" wire:model='address_city' />
            <label>Postal Code</label>
                <input type="text" x-ref="cep_input" wire:model='address_postalcode'/>
            <label>Street</label>
                <input type="text" x-ref="street_input" wire:model='address_street'/>
            <label>Number</label>
                <input type="text" x-ref="number_input" wire:model='address_number'/>
            <label>Complement</label>
                <input type="text" wire:model='address_complement'/>
            <label>Locality</label>
                <input type="text" wire:model='address_locality'/>

            <button type="button"
                @click="modalOpen = true"
            >Search Postal Code</button>
                <p x-text.live="$wire.address_state"></p>
            
            <template x-teleport="body">
                <livewire:admin.postal-code-search :state="$address_state" :city="$address_city" :street="$address_street" />
            </template>
        </div>
    </fieldset>
</form>

子组件：Livewire/Admin/PostalCodeSearch.php #

<?php

namespace App\Livewire\Admin;

use GuzzleHttp\Client;
use Illuminate\Support\Str;
use Livewire\Component;

class PostalCodeSearch extends Component
{
    public string $state;
    public string $city;
    public string $street;
    public array $postalCodes;

    public function mount()
    {
        $this->postalCodeSearch();
    }

    public function postalCodeSearch()
    {
        $this->postalCodes = [];

        try {
            $client = new Client(['base_uri' => 'https://viacep.com.br/ws/']);

            $response = $client->request('GET',
                Str::upper($this->state) .
                '/' .
                htmlspecialchars($this->city) .
                '/' .
                htmlspecialchars($this->street) .
                '/json'
            );
        } catch (\Throwable $th) {
            return;
        }

        if ($response->getStatusCode() == 200) {
            $json = json_decode($response->getBody()->getContents());
            if (sizeof($json) != 0) {
                $this->postalCodes = $json;
            }
        }
    }

    public function render()
    {
        return view('admin.livewire.modal.postal-code', [
            'postalCodes' => $this->postalCodes
        ]);
    }
}

子组件视图：views/admin/livewire/modal/postalcode.blade.php #

<div role="dialog" aria-modal="true"
    x-cloak
    x-show="modalOpen"
>
    <div>
        <div aria-modal="true"
            x-trap.inert.noscroll="modalOpen"
        >
            @if ($postalCodes)
            <ul>
                @foreach ($postalCodes as $code)
                <li>{{ $code->cep }}</li>
                @endforeach
            </ul>
            @endif
        </div>
    </div>
</div>

1. 实现父组件属性实时同步到子组件 #

Livewire中，:prop="$parentProp"仅在组件初始化时传递值，后续父组件属性变更不会自动同步。需在子组件中添加属性变更监听：
修改PostalCodeSearch.php，添加属性更新钩子：

// 在PostalCodeSearch类中新增
public function updated($propertyName)
{
    // 当state、city、street任一属性变化时，重新执行搜索
    if (in_array($propertyName, ['state', 'city', 'street'])) {
        $this->postalCodeSearch();
    }
}

2. 使用双向绑定简化同步（推荐） #

在父组件调用子组件时，改用wire:model绑定属性，实现自动双向同步：

<!-- 修改create.blade.php中的子组件调用代码 -->
<livewire:admin.postal-code-search 
    wire:model:state="$address_state" 
    wire:model:city="$address_city" 
    wire:model:street="$address_street" 
/>

3. 优化模态框打开时的搜索触发逻辑 #

当前子组件仅在初始化时执行一次搜索，建议在模态框打开时触发搜索，确保使用最新参数：

• 父组件视图修改按钮点击事件：

<button type="button"
    @click="modalOpen = true; $wire.emit('triggerPostalCodeSearch')"
>Search Postal Code</button>

• 子组件添加事件监听：

// 在PostalCodeSearch类的mount方法后新增
protected $listeners = ['triggerPostalCodeSearch' => 'postalCodeSearch'];

4. 修复模态框状态跨组件访问问题 #

当前子组件视图依赖父组件的modalOpen变量，可将模态框状态移至子组件内部：
修改子组件视图：

<div role="dialog" aria-modal="true"
    x-cloak
    x-data="{ modalOpen: false }"
    @open-modal.window="modalOpen = true"
    @close-modal.window="modalOpen = false"
    @keydown.escape.window="modalOpen = false"
>
    <div>
        <div aria-modal="true"
            x-trap.inert.noscroll="modalOpen"
        >
            <button @click="modalOpen = false">关闭</button>
            
            @if ($postalCodes)
            <ul>
                @foreach ($postalCodes as $code)
                <li>{{ $code->cep }}</li>
                @endforeach
            </ul>
            @endif
        </div>
    </div>
</div>

父组件按钮点击事件改为：

<button type="button"
    @click="$wire.emit('open-modal'); $wire.emit('triggerPostalCodeSearch')"
>Search Postal Code</button>

子组件补充事件监听：

protected $listeners = [
    'triggerPostalCodeSearch' => 'postalCodeSearch',
    'open-modal' => 'openModal',
    'close-modal' => 'closeModal',
];

public function openModal()
{
    // 可添加打开前的预处理逻辑
}

public function closeModal()
{
    // 可添加关闭后的清理逻辑
}

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