Livewire父子组件间数据传递：解决子组件属性为空问题

<div class="row g-4">
    <div class="col-lg-4 col-sm-6">
        <div class="single-info-input">
            <label class="label_title">{{ __('Title') }} </label>
            <input class="form--control" type="text" wire:model.defer="title">
        </div>
    </div>
</div>

<!-- 渲染子组件并传递 'title' 属性 -->
<div class="row g-4">
    <div class="col-lg-4 col-sm-6">
        <div class="single-info-input">
            {{-- 将父组件的 $title 属性传递给子组件的 initialTitle 参数 --}}
            <livewire:include-service :initialTitle="$title" />
        </div>
    </div>
</div>

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class ParentComponent extends Component
{
    public $title; // 用于绑定输入框的值

    public function mount()
    {
        // 初始化属性，例如从数据库加载或设置默认值
        $this->title = 'Default Title'; 
    }

    public function serviceStore()
    {
        // 在表单提交后，这里的 $this->title 将包含输入框的最新值
        // dd($this->title); // 验证父组件的 $title 值
        // 这里的逻辑通常是处理父组件的数据保存
    }

    public function render()
    {
        return view('livewire.parent-component');
    }
}

<?php

namespace App\Http\Livewire;

use Livewire\Component;

class IncludeService extends Component
{
    public $initialTitle; // 公共属性，用于接收并存储从父组件传递过来的标题

    /**
     * mount 方法在组件初始化时被调用，并接收从父组件传递的参数。
     *
     * @param string|null $initialTitle 从父组件传递过来的标题
     * @return void
     */
    public function mount($initialTitle = null)
    {
        // 将传递过来的值赋给组件的公共属性
        $this->initialTitle = $initialTitle;
        // 现在，你可以在子组件的任何方法或Blade模板中使用 $this->initialTitle
        // dd($this->initialTitle); // 验证子组件是否成功接收到值
    }

    public function render()
    {
        return view('livewire.include-service');
    }
}

<div>
    <h3>子组件内容</h3>
    <p>从父组件接收到的标题: <strong>{{ $initialTitle }}</strong></p>

    @if($initialTitle)
        <p>这是一个基于父组件标题的动态内容。</p>
    @else
        <p>父组件未提供标题。</p>
    @endif

    {{-- 你可以在这里添加子组件自己的输入或其他逻辑 --}}
    <label class="label_title">子组件自己的输入</label>
    <input class="form--control" type="text" wire:model="childSpecificValue">
</div>