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传递多个道具

回答

相关问题