Vue, проходящий несколько реквизитов

Question

Я создаю веб-сайт, используя фреймворк PHP Laravel. Я хочу создать компонент vue, который будет использоваться для создания и редактирования записи. Я получил это, чтобы работать с передачей одного свойства компоненту vue, но теперь я хочу передать второй компонент, чтобы установить текст кнопки. Может быть, есть лучший способ сделать это, но позвольте мне показать вам, что я до сих пор

клинка файл

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

Обратите внимание на код выше перерывов, потому что это не так, как я и передача второго параметра

Вот мой вю компонент

<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> 

Не уверен, что именно то, что мне не хватает. Если есть ссылка на документ, я могу прочитать, пожалуйста, поделитесь.

Answer 1

Если я получу то, что вы говорите, вы можете использовать slot.

В вашем шаблоне компонента выполните следующие действия:

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

и при инициализации компоненты в лезвии сделать это:

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

или если вы хотите, чтобы быть динамичными вы можете сделать это:

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

Vue 2 поддерживает даже названные слоты.

Не проверял его, но он должен работать.