时间戳

首页 > 解决方案 > v-bind.sync 不将对象作为道具传递

javascript - v-bind.sync 不将对象作为道具传递

问题描述

我将一个对象作为必需的道具传递给一个组件，v-bind.sync但我收到了一个错误Missing required prop: "filters"

我在这里想念什么？它似乎不像文档中指定的那样工作：

v-bind.sync="doc"：

这会将doc对象中的每个属性（例如title）作为单独的道具传递，然后为每个属性添加v-on更新侦听器。

这是我的组件，它被称为使用<ListFilters v-bind.sync="filters" />

<template>
  <div>{{ filters }}</div>
</template>

<script>
export default {
  name: 'ListFilters',
  props: {
    filters: {
      type: Object,
      required: true
    }
  }
}
</script>

添加默认值filters会导致组件使用默认值而不是父值。

标签： javascriptvue.js

解决方案

正如您提供的突出显示的段落中所述，任何属性都filters将作为其自身的属性传递给子组件。因此，它需要包含另一个filters属性 ( filters.filters) 才能在该名称下的子组件中访问。要传递父级的属性本身，您可以使用v-bind:filters.sync="filters"。

推荐阅读