Question

我知道有很多关于slots without DOM elements的话题。那么自定义指令呢？（也就是说，特殊的“属性”将修改组件/ DOM元素的行为）

Answer 1

就像在Vue中一样，还没有自定义的指令，但是您可以使用use:something将动作绑定到子元素。请参阅文档here。您还可以找到一个官方示例here。

这是一个小例子：

<button on:click={doSomething} use:tooltip={calculatedTooltip}>
    Click Me
</button>

Answer 2

来自Angular背景，我想知道同样的事情。我很高兴看到Svelte中有something similar，这要归功于GoogleMac的{{3}}。

如果您习惯于Angular，那么您可能还会在寻找事件调度（在Angular中{@Output）。 Svelte的动作似乎没有这样的概念，但是您可以使用parameters。这是一个示例：

// outside-click.js => Action
export function outsideClick(node, onOutsideClick) {
  //                               ^^^^^^^^^^^^^^ parameter
  function handleClick ({ target }) {
    const clickedOutside = !node.contains(target);

    if (clickedOutside) {
      onOutsideClick();
    }
  }

  window.addEventListener('click', handleClick);

  return {
    destroy () {
      window.removeEventListener('click', handleClick);
    }
  };
}

// MyComponent.svelte => component
<script>
  function hideMenu() {
    // hide menu logic
  }
</script>

<div use:outsideClick={hideMenu} class="menu">
  <!-- Menu that has to be closed when clicking outside of it -->
</div>

希望这会对某人有所帮助。

是否可以在Svelte中创建自定义指令？

2 个答案: