从外部脚本隐藏 Svelte 组件答案

【问题标题】：Hide Svelte component from outside script从外部脚本隐藏 Svelte 组件
【发布时间】：2022-01-15 22:09:30
【问题描述】：

我正在导入一个带有多个子项的第三方 Svelte3 组件。举例来说，第三方组件如下所示：

<script>
import Child1 from './third-party/Child1.svelte';
import Child2 from './third-party/Child2.svelte';
</script>

<div>
    <Child1/>
    <Child2/>
</div>

考虑到以下情况，从我的应用程序中（或从开发控制台）隐藏其中一个子组件的最简洁方法是什么：

它没有易于识别的 CSS 选择器，并且
无法修改第三方代码？

在 Vue 中，我会使用根实例，但在 Svelte 中可以吗？

非常感谢！

圭多

【问题讨论】：

您可以隐藏第三方的nth-child 吗？ REPL
从应用程序和开发控制台中隐藏是什么意思？从 DOM 中删除它？只是在视觉上隐藏它？
@pilchard 感谢您的建议！但是，我不能依赖元素的顺序。
@johannchopin “隐藏”是指视觉上的隐藏，尽管从 DOM 中删除也可以满足我的目的。谢谢:-)

标签： javascript svelte svelte-3

【解决方案1】：

没有干净的方法。从组件外部弄乱 DOM 是一种不可靠的解决方案，并且可能导致不可预知的结果。

这是第三方需要添加到他们的公共API的一个功能。

第三方的一个选项是使用 $set 使用 component api:

// App.svelte
<script>
import Child1 from './third-party/Child1.svelte';
import Child2 from './third-party/Child2.svelte';

export let child2Visible = true;
</script>

<div>
    <Child1/>
    {#if child2Visible}
      <Child2/>
    {/if}
</div>

// my-app.js
import App from "./App.svelte";

window.app = new App({target});

// From dev console
app.$set({ child2Visible: false })

第三方的另一种方法是公开一种设置store 值的方法，该值可以切换某些用户界面。

【讨论】：

感谢您的回答。唉，它并没有解决我的困境，但非常感谢它为第三方展示了干净的方式。