Vue 传递多个 props答案

【问题标题】：Vue passing multiple propsVue 传递多个 props
【发布时间】：2017-05-08 14:16:05
【问题描述】：

我正在使用 PHP 框架 Laravel 构建一个网站。我想创建一个用于创建和编辑记录的 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>

不确定我到底错过了什么。如果有我可以阅读的文档的链接，请分享。

【问题讨论】：

我认为小胡子又是一个问题，因为 Laravel 使用与 Vue 相同的方法，并且您想向下传递值 - 所以我认为您不需要在这里绑定，所以不要使用 : @ 987654324@
所以我只需要前面的冒号吗？
没有冒号是 v-bind 的简写，你必须从显示属性中删除它。

标签： php vue.js laravel-5.3

【解决方案1】：

将您的动态camelCase 属性:buttonText 更改为kebab-case :button-text。我遇到了同样的问题，并试图解决几个小时。

请注意，HTML 属性不区分大小写，camelCased 道具在使用 DOM 内模板时需要使用其 kebab-case 等效项。您可能应该使用“var-val”而不是“varVal”。

我正在使用 Vue 2 和 Laravel 5.6。

【讨论】：

【解决方案2】：

如果我明白你的意思，你可以使用slot。

在您的组件模板中执行以下操作：

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

当您在刀片中初始化组件时，请执行以下操作：

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

或者如果你希望它是动态的，你可以这样做：

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

Vue 2 甚至支持命名槽。

没有测试，但应该可以。

【讨论】：