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

Question

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

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: '',
  {
}

---

代码笔: https://codepen.io/anon/pen/ddEjgp?editors=1010

---

问题:

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

Answer 1

您期望更改后的 search 值对父组件可用，但这是错误的。根据 vue 文档:

One-Way Data Flow

All props form a one-way-down binding between thechild 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 inthe child component will be refreshed with the latest value. Thismeans you should not attempt to mutate a prop inside a childcomponent. If you do, Vue will warn you in the console.

您应该在工具栏的v-text-field (@ input="onInput") 并发出一些事件 (this.$emit('filterinput', str)) 将数据弹出到父组件! parent 应该听取(@filterinput="localSearchUpdate")该事件(codepen 中的filterinput)并更改他本地的(方法localSearchUpdate) 搜索 从事件字符串中接收到的数据:

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