Vue passiert mehrere Requisiten

Question

Ich baue eine Website mit dem PHP-Framework Laravel. Ich möchte eine Vue-Komponente erstellen, die zum Erstellen und Bearbeiten eines Datensatzes verwendet wird. Ich habe dies mit der Übergabe einer Eigenschaft an die vue-Komponente arbeiten lassen, aber jetzt möchte ich eine zweite Komponente übergeben, um den Text der Schaltfläche festzulegen. Vielleicht gibt es einen besseren Weg, dies zu tun, aber lassen Sie mich Ihnen zeigen, was ich

Blade-Datei so weit haben

<addeditshow :show="{{$show}}" :buttonText="Edit"></addeditshow> 

Notieren Sie sich den Code oben bricht, weil es nicht wie ich und einen zweiten Parameter zu senden

Hier ist meine vue Komponente

<template> 
    <div> 
     <div class="form-group"> 
      <label for="name">Name</label> 
      <input type="text" name="name" class="form-control" :value="show.name"> 
     </div> 
     <div class="form-group"> 
      <label for="number">Number</label> 
      <input type="number" name="number" class="form-control" :value="show.number"> 
     </div> 
     <div class="form-group"> 
      <label for="date">Date</label> 
      <input type="text" id="date" name="airDate" class="form-control" placeholder="Pick a Date" :value="show.airDate"> 
     </div> 
     <div class="form-group"> 
      <label for="podcast">Podcast URL</label> 
      <input type="text" id="podcast" name="podcastUrl" class="form-control" :value="show.podcastUrl"> 
     </div> 

     <button type="submit" class="btn btn-primary">{{ buttonText }}</button> 
    </div> 
</template> 


<script> 
    export default { 
     mounted() { 
      console.log(this.show); 
     }, 

     props: { 
      show: { 
       type: Object, 
       required: true 
      } 
     } 
    } 
</script> 

Nicht sicher genau das, was ich vermisst. Wenn es einen Link zu einem Dokument gibt, das ich lesen kann, bitte teilen.

Answer 1

Wenn ich bekomme, was Sie sagen, könnten Sie slot verwenden.

In Ihrer Komponentenvorlage dies zu tun:

<button type="submit" class="btn btn-primary"><slot></slot></button> 

und wenn Sie diese Komponente in Klinge tun initialisieren:

<addeditshow :show="{{$show}}">Edit</addeditshow> 

oder wenn Sie es wollen Sie dies dynamisch sein können tun:

<addeditshow :show="{{$show}}">@{{ $buttonText }}</addeditshow> 

Vue 2 unterstützt sogar benannte Steckplätze.

Habe es nicht getestet, aber es sollte funktionieren.