Question

我正在检查我的“根和子”（Topbar）组件，并且每次都没有定义foo属性。自定义错误后，我不确定自己在做什么错。

app.js

window.Vue = require('vue');

Vue.component('Topbar', 
    require('./components/Topbar.vue').default);

new Vue({
    el: "#app",
    data: {
        activeTab: "cart"
    },
    props: {
        foo: "testing props"
    }
})

Topbar.vue

<template>
    <div class="cont">
        <div class="tabs">
            <a v-on:click="handleClick('account')" v-bind:class="[ activeTab === 'account' ? 'active' : '' ]">Account</a>
            <a v-on:click="handleClick('cart')" v-bind:class="[ activeTab === 'cart' ? 'active' : '' ]">{{foo}}</a>
        </div>
    </div>
</template>

<script>

    export default {
        props: ['activeTab'],
        data() {
            return {
                activeTab: "CCC"
            }
        },
        props: ["foo"],

    }
</script>

laravel-blade-template文件

<div id = "app"> 
   <Topbar :foo="testing props"></Topbar>
</div>

Answer 1

尝试删除foo前面的冒号。

如果添加冒号，则它将作为JavaScript执行，并且变量testing不存在。如果删除冒号，则应该收到"testing props"作为字符串。

<div id = "app"> 
   <Topbar foo="testing props"></Topbar>
</div>

Answer 2

您的代码存在3个问题。

您正在app.js中定义道具。您无法为其分配值。您使用的语法不能用于传递变量。有关声明道具here的语法的更多信息。
在Topbar中，您为道具分配了一个值，但使用的是绑定语法。 Vue将执行以下js代码testing props，这不是有效的代码。您应该使用此:foo="'testing props'"。引号中引起撇号的原因是，'testing props'是JS中的有效字符串，它将被分配给您的道具。
您还在props中定义了Topbar.vue 2次。您将得到最后一个定义，而这可能不是您想要的。

Answer 3

我可以在您的代码中识别出两个错误：

您的导出中不应包含props定义
您已分配给testing props的值foo是string，并且应该用single quotes (')包装。

以下代码应该起作用：

export default {
    props: ['activeTab', 'foo'],
    data() {
        return {
            activeTab: "CCC"
        }
    }

}

还有这个

<Topbar :foo="'testing props'"></Topbar>

Vue：道具不断返回未定义状态

3 个答案: