Question

想象一下，您在一个组件中有很多属性：

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

然后，您想要执行类似的操作，例如从另一个外部回调中更新所有这些内容，例如在另一个库中（即，那些本身不是Svelte组件，也不能成为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配合使用。

很抱歉，是否曾经有人问过这个问题。我花了几天时间试图解决这个问题，以避免所有多余的样板，而我能找到的最接近的是Access Component Object in External Callback?，它目前没有答案。

Answer 1

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

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

let dataObject = {};
onMount(async function() {
  ajax('/data', function(data) {
    dataObject = data;
  });
});

Answer 2

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

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

但是，如果您有大量的变量，最好先将它们放在对象中会更好：

let stuff;

onMount(async function() {
  ajax('/data', data => {
    stuff = data;
  });
});

在回调中访问Svelte组件属性？

2 个答案: