MeltUI示例中Svelte语法action={trigger}>里的>有何作用？

你看到的那个>其实就是Svelte组件标签的结束标记，和普通HTML里<button>点击我</button>的>作用完全一样，只是因为代码换行排版的原因，和后面的插槽内容凑在了同一行，才让你产生了疑问。

拆解下这段代码的结构：

<Button 
  on:click={() => console.log('clicked')} 
  {...$trigger} 
  action={trigger}
> <!-- 这里的`>`就是开始标签的结束 -->
  {$open ? 'Close' : 'Open'} <!-- 这是Button组件的默认插槽内容 -->
</Button>

简单来说：

• 从<Button到>之间的部分，都是给Button组件传递的属性（比如自定义点击事件、MeltUI的触发器属性、action绑定）
• >之后、</Button>之前的内容，是组件的内部插槽内容，也就是按钮上显示的文本，会根据$open的状态切换显示“Close”或“Open”

完全不用过度解读，它就是Svelte组件开始标签的闭合符号，用来划分属性区和内容区。

内容的提问来源于stack exchange，提问作者Kabira K