Vue.js 如何使该组件将其值传递给父组件？

我有两个组件-搜索过滤器和迭代器在同一个组件中App.vue，如下所示：

App.vue

...
...
数据（）{
返回{
搜索：“”，
{
}

但后来我将该搜索过滤器移动到一个名为

的单独组件中，其中的搜索过滤器不再工作：

App.vue

...
...
数据（）{
返回{
搜索：“”，
{
}

---

Codepen:

---

问题:

---

我应该在新的

组件中添加什么，以便它将键入该搜索筛选器的数据传递到App.vue父组件？

您希望更改的

搜索值对父组件可用，这是错误的。根据vue文档：


所有道具在两个支柱之间形成单向向下绑定
子属性和父属性：当父属性更新时，
它会向下流到孩子身上，但不会反过来流到孩子身上

此外，每次更新父组件时，所有道具都会在
子组件将使用最新值刷新。此
意味着你不应该尝试在孩子体内变异道具
如果您这样做，Vue将在控制台中警告您

您应该在工具栏的
v-text-field
（
@input=“onInput”
）中处理
change
或
input
（更适合您的任务）事件，并发出一些事件（
this.$emit（'filterinput'，str）
）将数据弹出到父组件！并且父组件应该侦听（
@filterinput=“localSearchUpdate”
）到该事件（
filterinput
在codepen中）并更改（方法
localSearchUpdate
）他本地的
search
数据，从事件字符串接收：

你需要传递道具，你会在这里得到一些帮助：@BhojendraNepal我刚刚更新了密码笔，我添加了
道具：['search']，
但它仍然不起作用，我做错了吗？啊，现在我明白了，非常感谢你的解释！