Question

我有两个组件 - 搜索过滤器，迭代器在同一个组件 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 docs：

One-Way Data Flow

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

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

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

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

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

App.vue

App.vue

问题：

1 个答案: