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

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 值可用于 parent 组件，这是错误的。根据 vue 文档：

One-Way Data Flow

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around.

In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.

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

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

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

How do I make this component to pass its value into a parent component?

vue.js

vuejs2

vuetify.js

App.vue

App.vue

问题：