Livewire组件间值传递：FormElements向Form传$wil实现数据查询

方法一：通过父组件传递Props（最直观，适合新手） #

如果两个组件渲染在同一个父视图中，直接通过父组件共享状态是最简单的方式：

1. 父视图中统一管理状态
   在包含两个组件的父视图（比如welcome.blade.php）中定义共享变量，并传递给组件：

   <!-- 父视图代码 -->
   <div>
       <livewire:form-elements wire:model="selectedWil" />
       <livewire:form :wil="$selectedWil" />
   </div>
   
   @push('scripts')
       <script>
           function closeFunction() {
               // 保留你原有的下拉框关闭逻辑
           }
       </script>
   @endpush
   

2. 修改FormElements组件
   移除updatedWil中不必要的视图返回逻辑，确保$wil属性能被父组件双向绑定：

   class FormElements extends Component
   {
       public $deliveryFees = 0;
       public $wil = 'Blida';
       public $fees = [];
       
       public function deliveryFees()
       {
           $this->deliveryFees;
       }
       
       public function render()
       {
           $destination = DB::table('delivery_fees')->pluck('destination');
           return view('livewire.form-elements', compact('destination'));
       }
   
       public function updatedWil()
       {
           $this->fees = DeliveryFee::select('stopdesk', 'domicile','id')
               ->where('destination', $this->wil)
               ->get()->toJson();
           // 移除原return view语句，Livewire会自动更新组件
       }
   }
   

3. 修改Form组件
   添加公共属性接收父组件传递的wil值，动态执行数据查询：

   class Form extends Component
   {
       // 接收父组件传入的wil值，默认值保留原逻辑
       public $wil = 'Alger';
   
       public function render()
       {
           $wilayas = Wilaya::where('nom', $this->wil)->first();
           // 简化数据查询逻辑
           $communes = $wilayas ? Commune::where('wilaya_id', $wilayas->id)->get() : [];
   
           return view('livewire.form', compact('wilayas', 'communes'));
       }
   }
   

方法二：通过Livewire事件通信（适合组件无直接父关联场景） #

如果两个组件不在同一个父视图下，用事件传递值更灵活：

1. FormElements组件触发事件
   在updatedWil方法中发送包含wil值的事件：

   public function updatedWil()
   {
       $this->fees = DeliveryFee::select('stopdesk', 'domicile','id')
           ->where('destination', $this->wil)
           ->get()->toJson();
       // 发送事件，传递当前选中的wil值
       $this->emit('wilUpdated', $this->wil);
   }
   

2. Form组件监听事件并更新数据
   添加事件监听器和公共属性，接收并处理传递的值：

   class Form extends Component
   {
       public $selectedWil = 'Alger';
       public $wilayas;
       public $communes = [];
   
       // 监听wilUpdated事件，绑定处理方法
       protected $listeners = ['wilUpdated' => 'handleWilChange'];
   
       // 处理事件，更新选中的wil值
       public function handleWilChange($wil)
       {
           $this->selectedWil = $wil;
           // Livewire会自动重新调用render方法刷新数据
       }
   
       public function render()
       {
           $this->wilayas = Wilaya::where('nom', $this->selectedWil)->first();
           $this->communes = $this->wilayas ? Commune::where('wilaya_id', $this->wilayas->id)->get() : [];
   
           return view('livewire.form', [
               'wilayas' => $this->wilayas,
               'communes' => $this->communes
           ]);
       }
   }
   

注意事项 #

• 务必移除Form组件中原有的dd($wilayas->id)语句，否则会中断程序执行；
• 下拉框的wire:model="wil"已经能实现状态同步，无需额外添加隐藏输入框；
• 确保Wilaya和Commune模型的命名空间正确引入。

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