0

假设您在一个组件中有很多属性：

let a = 'foo';
let b = 'bar';
// ...
let z = 'baz';

然后，您想做一些事情，例如从外部回调中更新所有这些，就像在另一个库中一样（即不是也不能是 Svelte 组件本身的东西）。

一个简单的用例只是一个加载一堆数据的 AJAX 方法（假设这个 ajax 函数有效并且你可以给它传递一个回调）：

onMount(async function() {
  ajax('/data', function(data) {
    a = data.a;
    b = data.b;
    // ...
    z = data.z;
  });
});

这行得通，但它是令人难以置信的样板。我真正想要的是一种遍历所有属性的方法，以便可以以编程方式分配它们，尤其是在没有外部库/回调部分的先验知识的情况下。

有没有办法访问 Svelte 组件及其属性，以便您可以循环访问它们并从外部函数分配它们？

Vue 有一个简单的解决方案，因为你可以传递组件，并且仍然检查并分配给它的属性：

var vm = this;
ajax('/data', function(data) {
  for (var key in data) {
    if (vm.hasOwnProperty(key)) {
      vm[key] = data[key];
    }
  });
});

我已经看到了一些解决方案，但它们都已经过时了——它们都不适用于 Svelte 3。

抱歉，如果以前有人问过这个问题。我花了几天时间试图弄清楚这一点以避免所有额外的样板文件，而我能找到的最接近的是外部回调中的访问组件对象？现在没有答案。

4

2 回答 2

1

如果可能，您可以将 ajax 调用放在父组件中，并将从中返回的数据存储在一个临时对象中，然后使用扩展运算符将其传递给组件。

<Component { ...dataObject }></Component>

let dataObject = {};
onMount(async function() {
  ajax('/data', function(data) {
    dataObject = data;
  });
});
于 2019-08-21T09:23:51.563 回答
0

您可以通过使用解构来减少样板：

onMount(async function() {
  ajax('/data', data => {
    ({ a, b, ..., z } = data);
  });
});

但是如果你有大量的变量，你最好先把它们放在一个对象中：

let stuff;

onMount(async function() {
  ajax('/data', data => {
    stuff = data;
  });
});
于 2019-08-21T13:03:28.090 回答