时间戳

首页 > 解决方案 > Vue：组件中声明的道具未定义

reactjs - Vue：组件中声明的道具未定义

问题描述

我花了两天时间，试图自己解决这个问题，但无法让它发挥作用。基本上我在父组件中声明了我的所有道具，但由于某种原因它们根本没有出现。

零件

let addFilter = {
    props: ['newFilterName'],
    template:  `<div class="row">
                    <div class="field-options">{{ newFilterName }}</div>
                </div>`,
};

实例

let filterManager = new Vue({
    el: '#filter-manager',
    components: {
        'add-filter': addFilter
    },
    data: {
        newFilterName: 'Test1234'
    }
});

HTML

<div id="filter-manager" v-show="visible">
    <div class="body">
        <add-filter></add-filter>
     </div>
</div>

标签： reactjsvue.jsvuejs2vue-component

解决方案

您需要将数据从父级传递给组件

<div id="filter-manager" v-show="visible">
    <div class="body">
        <add-filter :new-filter-name="newFilterName" ></add-filter>
     </div>
</div>

要明确:new-filter-name的是子组件的属性，右侧"newFilterName"是您在父组件中定义的数据属性。只是将它们命名为相同并没有任何作用。实例化组件时需要分配。

推荐阅读