Vue.js Vue自定义筛选输入组件

我正在尝试创建一个“只有”文本输入的组件。此输入中键入的字符串将用于筛选列表。我的问题是，我无法处理如何在我的组件和包含要筛选列表的主应用程序之间共享此筛选字符串

我尝试了几种方法，但大多数情况下都出现了错误：

避免直接改变道具，因为每当父组件重新渲染时，该值将被覆盖。相反，使用基于道具值的数据或计算属性

所以我查看了Vuex，但我认为它在这种情况下没有帮助，因为我可以在同一页面中为不同的列表使用多个过滤器组件，我不希望它们被同步^^

以下是我所拥有的：

过滤器组件

<script type="x/template" id="filterTpl">
    <div> 
        <span class="filter-wrapper">
            <input type="search" class="input input-filter" v-model.trim="filter" />
        </span>
    </div>
</script>

<script>
    Vue.component('list-filter', {
        props: {
            filter: String
        }
        template: '#filterTpl'
    });
</script>

Vue.component（'list-filter'{
道具：{
过滤器：字符串
}
模板：“#filterTpl”
});

和我的主应用程序：

<div id="contacts">
        <list-filter :filter="filter"></list-filter>
        <ul class="contacts-list managed-list flex">
            <li class="contact" v-for="contactGroup in filteredData">
                [...]
            </li>
        </ul>
    </div>

<script>
    var contactsV = new Vue({
        el: '#contacts',
        data: {
            filter: "",
            studyContactsGroups: []
        },
        computed: {
            filteredData: function(){
                // Using this.filter to filter the studyContactsGroups data
                [...]
                return filteredContacts;
            }
        }
    });
</script>

过滤数据中的联系人组>
[...]


var contactsV=新的Vue({
el:“#联系人”，
数据：{
过滤器：“”，
StudyContactsGroup:[]
},
计算：{
filteredData:函数（）{
//使用this.filter筛选studyContactsGroups数据
[...]
返回过滤器安装的触点；
}
}
});

---

感谢您的帮助或提示：）

您可以通过显式道具事件连接或更简洁的带有修饰符的v-bind来同步子值和父道具：

newvue({
el:“#应用程序”，
数据：{
原始数据：['John'，'Jane'，'Jim'，'Eddy'，'Maggy'，'Trump'，'Che']，
筛选器：“”
},
组成部分：{
“我的输入”：{
//将属性“查询”绑定到值和
//@input通过与“.sync”一起使用的事件更新父属性“过滤器”
模板：``，
道具：['query']，
方法：{
updateFilter:函数（e）{
this.$emit（'update:query'，e.target.value）//这在文档中有描述
}
}
}
},
计算：{
filteredData:函数（）{
//简单滤波函数
返回此.rawData.filter（el=>el.toLowerCase（）
.match（this.filter.toLowerCase（））
}
}
});



{{line}

您可以将
sync
与输入组件上的
filter
prop一起使用：-这将更新父组件内的filter prop。您需要重构输入组件以定义
值
prop并发出新值：
this.$emit（'update:filter'，newFilter）
。您好！谢谢。我无意中发现了这个文档，但我无法使它工作。所以我必须像这样同步组件的道具：然后在组件中生成另一个名为value的道具，当输入更改时，触发过滤器道具父级的更新？那么我必须将发出道具更改的方法放在哪里？