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

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

您期望更改的 search 值将可用于父组件，这是错误的。根据 vue 文档：

One-Way Data Flow

所有的 props 形成一个 one-way-down 在 子属性和父属性：当父属性更新时， 它会流向孩子，但不会反过来。

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

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

https://codepen.io/anon/pen/rJgqqv?editors=1010