Vue：道具不断返回未定义答案

【问题标题】：Vue: props keep coming back as undefinedVue：道具不断返回未定义
【发布时间】：2019-03-11 06:42:21
【问题描述】：

我正在检查我的 Root 和子 (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-模板文件

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

【问题讨论】：

为什么你的组件中有两个props 数据？

标签： laravel vue.js

【解决方案1】：

您的代码存在 3 个问题。

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

【讨论】：

【解决方案2】：

尝试删除foo前面的冒号。

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

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

【讨论】：

【解决方案3】：

我可以在您的代码中发现两个错误：

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

以下代码应该可以工作：

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

}

还有这个

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

【讨论】：