Vue 传递多个道具

Question

我正在使用 PHP 框架 Laravel 构建网站。我想创建一个用于创建和编辑记录的 vue 组件。我已经通过将一个属性传递给 vue 组件来实现这一点，但现在我想传递第二个组件来设置按钮的文本。也许有更好的方法来做到这一点，但让我向您展示我目前拥有的东西

Blade 文件

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

请注意上面的代码中断，因为它不喜欢 I 并发送第二个参数

这是我的 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>

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

Answer 1

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

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

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

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

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

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

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

Vue 2 甚至支持命名插槽。

没有测试，但应该可以。

Answer 2

将您的动态驼峰式属性 :buttonText 更改为烤肉串 :button-text。我遇到了同样的问题，并试图解决几个小时。

Note that HTML attributes are case-insensitive and camelCased props need to use their kebab-case equivalents when using in-DOM templates. You should probably use "var-val" instead of "varVal".

我正在使用 Vue 2 和 Laravel 5.6。

Vue 传递多个道具

Vue passing multiple props

php

vue.js

laravel-5.3