如何使此组件将其值传递给父组件？

Question

我有2个组件 - 搜索过滤器，迭代器在同一个组件App.vue中：

App.vue

<v-text-field 
  :search="search"
  v-model="search"
  label="type here to filter" 
>
</v-text-field>


<v-data-iterator
  :items="sortedContents"
  :search="search"
  v-model="selected"
>
  ...
</v-data-iterator>

...

data () {
  return {
    search: '',
  {
}

但后来我将搜索过滤器移动到一个名为<toolbar>的独立组件中，它内部的搜索过滤器不再起作用：

App.vue

<!-- this component contains the <v-text-field> -->
<toolbar :search="search"></toolbar>


<v-data-iterator
  :items="sortedContents"
  :search="search"
  v-model="selected"
>
  ...
</v-data-iterator>

...

data () {
  return {
    search: '',
  {
}

---

Codepen：https://codepen.io/anon/pen/ddEjgp?editors=1010

---

题：

我应该在新的<toolbar>组件中添加什么，以便将输入该搜索过滤器的数据传递给App.vue父组件？

Answer 1

您期望更改的qazxsw poi值可用于父组件，这是错误的。根据vue docs：

search

所有道具在子属性和父属性之间形成单向下绑定：当父属性更新时，它将向下流向子，但不是相反。

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

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

search