Vue傳遞多個道具

我正在使用PHP框架Laravel構建一個網站。我想創建一個用於創建和編輯記錄的vue組件。我已經得到這個與傳遞一個屬性到vue組件，但現在我想傳遞第二個組件來設置按鈕的文本。也許有更好的方式來做到這一點，但讓我告訴你我有什麼到目前爲止Vue傳遞多個道具

刀片文件

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

注意上面的斷碼，因爲它不喜歡我和發送第二個參數

這裏是我的VUE組件

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

不知道我缺少什麼。如果有文件的鏈接，我可以閱讀，請分享。

來源

2016-12-22 jrock2004

我認爲鬍子也有問題，因爲Laravel使用相同的Vue，並且你想傳遞值 - 所以我認爲你不需要綁定在這裏，所以不用'：' '' –

那麼前面的冒號就是我需要的嗎？ – jrock2004

Nope冒號是v-bind的簡寫，你必須從show attribure中刪除它。 –

如果我得到你說的話你可以用slot。

在你的組件模板做到這一點：

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

，當你在刀片初始化組件做到這一點：

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

，或者如果你希望它是動態的，你可以這樣做：

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

Vue 2支持甚至命名的插槽。

沒有測試它，但它應該工作。

來源

2016-12-22 22:40:36 peaceman

Vue傳遞多個道具

回答

相關問題