首页 文章

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

提问于
浏览 次
1

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

vue.js vuejs2 vuetify.js

1 回答

  • 1

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

    单向数据流所有道具在子属性和父属性之间形成单向向下绑定：当父属性更新时，它将向下流向子，但不是相反 . 此外，每次更新父组件时，子组件中的所有道具都将使用最新值进行刷新 . 这意味着您不应该尝试改变子组件内的prop . 如果你这样做，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

    回复于

相关问题