Vue:组件中声明的道具是未定义的

Question

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

组件

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>

Answer 1

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

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

首先，:new-filter-name是子组件的属性，右侧的"newFilterName"是在父组件中定义的数据属性。只给他们取同样的名字就什么都没有了。实例化组件时需要分配。