1

我有一个非常简单的实现，所以我觉得这可能是一个愚蠢的问题。刚从 vue 开始，我试图让一个组件能够列出其他组件；有点像可重复使用的列表、表格、网格等。

父组件gridView作为普通组件导入：

<template>
  <div :id="id" class="grid-view">
    <slot></slot>
  </div>
</template>

然后在另一个组件中，我尝试构建它：

<grid-view :dataSource="items">
  <grid-view-item-test
    v-for="(item, index) in items"
    :key="index"
    :title="item.title"
  />
</grid-view>

然后grid-view-item-test很简单。title作为道具。单独使用或不使用插槽都可以完全正常工作，但我想让它grid-view可重用，以获取我添加的任何其他组件并按原样显示。

<template>
  <div>
    <div>{{ title }}</div>
  </div>
</template>

如果我要做这样的事情：

<grid-view :dataSource="items">
   <grid-view-item-test
     :key="index"
     :title="'Test 1'"
   />
   <grid-view-item-test
     :title="'Test 2'"
   />
   <grid-view-item-test
     :title="'Test 3'"
   />
</grid-view>

它工作得很好。我做错了循环吗？我可以确认循环可以正确获取项目数。如果我在插槽上进行默认后备 - 我得到正确的数字，并且我直接在grid-view组件外部打印了它。

这不是一种可能吗？如果不是，您是否只使用 HTML 而不是可重用表格的组件，因为这似乎工作正常。

编辑：

如果我使用字符串或数字，但不使用对象，它完全可以正常工作。

我已经追踪到它items是一个空数组作为计算变量，然后抛出TypeError: null is not an object (evaluating 'oldChildren[i]'). 可以确认它items开始为空，然后在数据库调用设置它后填充，但我想我不能用插槽做类似的事情？

经过更多测试后，当您完全更新数据集（items）时它会失败。像这样的插槽无法重新渲染吗？

如果在初始数组中没有项目时我有一个空的 div （或任何东西），它可以完美地工作。

4

1 回答 1

0

您可能应该提供更准确的代码，因为我认为您提供的内容没有任何问题

工作示例：

const gridView = Vue.component('gridView', {
  props: ['dataSource'],
  template: `
    <div class="grid-view">
      <h4>My grid</h4>
      <slot></slot>
    </div>
  `
})

const gridItem = Vue.component('grid-view-item-test', {
  props: ['title'],
  template: `
    <div>
      <div>{{ title }}</div>
    </div>
  `
})

const vm = new Vue({
  el: '#app',
  data: () => ({
    items: [{
        title: 'Test 1'
      },
      {
        title: 'Test 2'
      },
      {
        title: 'Test 3'
      },
    ]
  })
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <grid-view :data-source="items">
    <grid-view-item-test v-for="(item, index) in items" :key="index" :title="item.title" />
  </grid-view>
</div>

于 2021-03-13T19:58:23.980 回答