Question

我正在使用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>

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

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支持甚至命名的插槽。

没有测试它，但它应该可以工作。

Answer 2

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

请注意，HTML属性不区分大小写，并且使用in-DOM模板时，骆驼式道具需要使用其kebab-case等效项。您应该使用“ var-val”而不是“ varVal”。

我正在使用Vue 2和Laravel 5.6。

Vue传递多个道具

2 个答案: