我有两个组件“帖子”和“帖子”,“帖子”显示帖子,通过单击图像我想在另一个组件中显示单击帖子的数据。
下面发布类和组件:
组件视图:
<div class="post" x-data="{open:false}">
@foreach($posts as $post)
<div>
<h1>{{ $post->name }}</h1>
<h3>{{ $post->body }}</h3>
<img @click="open = !open" wire:click="showPost({{ $post->id }})" src="{{ $post->image }}" alt="">
</div>
@endforeach
<livewireL:post>
</div>
组件类别:
class Posts extends Component
{
public $posts, $post;
public function mount(){
$this->posts = Post::all();
}
public function showPost($id){
$post = Post::find($id);
$this->post = $post;
}
public function render()
{
return view('livewire.posts');
}
}
这是帖子组件和类我想在这个组件中显示点击的数据,我已经尝试过 $emit 和许多文档,但没有结果。
我想要渲染该数据的组件视图:
<div x-show="open">
<h1>{{ $post->name }}</h1>
<h3>{{ $post->body }}</h3>
<img src="{{ $post->image }}">
</div>
我想传递数据的类:
class Post extends Component
{
public $post;
public function mount($id)
{
$this->post = \App\Post::find($id);
}
public function render()
{
return view('livewire.post');
}
}
您必须使用事件将数据从一个组件传递到另一个组件,如下所示。
组件 A 刀片:
<img @click="open = !open" wire:click="showPost({{ $post->id }})" src="{{ $post->image }}" alt="">
组件 A 类:
public function showPost($id){
$post = Post::find($id);
$this->post = $post;
$this->emit('newPost', $post->id);
}
您现在可以从其他 livewire 组件捕获该事件,如下所示:
B 组份:
class Post extends Component
{
public $post;
protected $listeners = ['newPost'];
public function mount($id)
{
$this->post = \App\Post::find($id);
}
public function render()
{
return view('livewire.post');
}
public function newPost($postId)
{
// here u have the id in your other component.
}
}
你也可以通过其他方式实现这一点。您可以从组件刀片传递 id 并检查this https://laravel-livewire.com/docs/events out.
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)