问题标签 [svelte-component]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
4001 浏览

javascript - 如何引用 Svelte 组件的父组件?

根据关于 Props 的 Svelte 文档,我正在使用 props 将对父组件的引用传递给子组件。

Props 是“properties”的缩写,是您将数据从父组件传递到子组件的方法

这正是我想做的。这是一个带有我的代码的 Svelte REPL,下面也复制了它:

我的父母是App.html

子组件是Widget.html

感谢 props,HTML<p>元素可以清楚地引用父元素。但是,如何在子组件的 JavaScript 中引用父组件中的值?

0 投票
1 回答
1134 浏览

rollupjs - 使用 rollup 将导入的 javascript 打包到 svelte 组件中

在我的代码中,我想导入一个跨多个组件通用的外部 javascript 文件。然而,当 rollup 构建组件时,它无法解析导入的依赖项,因此它永远不会包含在输出包中。请注意,我正在尝试构建一个苗条的组件(而不是苗条的应用程序),尽管我不确定这会有所作为。这是我的 rollup.config.js:

0 投票
1 回答
2937 浏览

svelte - SvelteJS:将数据传递给组件

我目前正在将使用 VueJS 的 Laravel 应用程序迁移到 SvelteJS(用 Svelte 替换 Vue 部分)。

使用 VueJS,我可以轻松地将 props 发送到安装在页面上的组件:

然后稍后访问组件中的 name 属性。

在 Svelte 中,我只能在嵌套时传递道具并在组件中访问它们。

App Component:我可以引用用户组件并发送道具

用户组件:

但我不知道如何将道具发送到未嵌套的组件,即:在独立的用户组件中,我无法发送道具。

我总是得到一个未定义的道具值错误。关于如何实现这一目标的任何想法?

谢谢

0 投票
1 回答
895 浏览

svelte - SvelteJs:对计算属性的深入观察

到目前为止,我们可以使用计算属性执行以下操作。

我们可以做这样的事情吗?

按照这个链接https://github.com/sveltejs/svelte/issues/11最终把我带到了https://github.com/sveltejs/svelte-extras/。但这再次解释了深刻的观察。

更新:PS 我知道 {field.values.length} 是无效的 javascript,我只是想展示我想要实现的目标。意味着观察类似于 ember 的嵌套属性

0 投票
1 回答
616 浏览

svelte - Svelte.js - 如何代理绑定?

我正在尝试使用自定义样式实现复选框组件,但找不到代理绑定的方法。这是组件现在的样子(它不起作用):

我希望它可以像往常一样使用带有checkedgroup绑定的复选框。但现在没有组我得到一个错误。有没有办法用 Svelte 做这些事情?

0 投票
1 回答
1277 浏览

svelte - 在 Svelte 组件中单击焦点切换

我制作了一个用于输入财务数字的组件,用于我的输入表单。它现在真的很好用,除了一个奇怪的行为:当我点击输入字段时,它会按预期获得焦点,但是当它已经有焦点时点击它会带走焦点。

组件中只有一个 on:click 处理程序,当我删除它时,行为没有改变。所以,我不知道是什么导致了这种奇怪。

这是显示问题的 REPL。

https://svelte.technology/repl?version=2.15.3&gist=27f91d57e7a9267fe7d7d36aad850c7e

0 投票
1 回答
1489 浏览

svelte - 从 svelte 组件公开和调用方法的最佳实践

我构建了一个简单的横幅组件,该组件被导入到 _layout.html 中。它公开了 5 种方法(dismiss、info、warning、...)。

目前我正在使用商店来跟踪这些方法,如下面的 _layout.html 所示。

_layout.html

所以我可以从应用程序的任何部分调用它们,如下所示:

博客.html

这工作正常,但我想知道这是否是最好的 Svelte 方法。

0 投票
1 回答
3232 浏览

svelte - Firing events from a svelte component and hearing it from containing page

I have this code in my component that is essentially the same as the example in the svelte docs:

I then have this code in the script tag of the HTML page that instantiates this component which is also essentially the same as the svelte docs:

However, when I trigger the event, I get this error: this.dispatchEvent is not a function.

I've tried a number of variations on this.dispatchEvent() like simply dispatchEvent(), which doesn't error but also doesn't trigger the listener; and window.dispatchEvent() which also fails to trigger.

What am I doing wrong?

0 投票
1 回答
50 浏览

svelte - 捆绑 unix 和 win10

我有这样一个问题 - 当我在 Unix 下创建包时,它会生成一个包含如下行的包:

如果在 Windows 下:

但是我的 CSS 设计器这样做是为了影响应用程序中树的外观。也许有人会告诉我如何解决这个问题 - 例如,强制 Svelte 生成如下字符串: text2 = createText("\n\n"); 链接到 gitHub https://github.com/kirilletc/svelte.geomixer

链接到捆绑线:win 捆绑:https ://github.com/kirilletc/svelte.geomixer/blob/master/public/winnie_2.0_win.js#L563 unix 捆绑:https://github.com/kirilletc/svelte。 geomixer/blob/master/public/winnie_2.0.js#L563

它的编译示例: windows:https ://kirilletc.github.io/svelte.geomixer/public/index_win.html?config= N72NF unix:https ://kirilletc.github.io/svelte.geomixer/public/?config= N72NF

0 投票
2 回答
604 浏览

javascript - 为什么 Tone JS 在 Svelte 组件中表现不佳?

我对 Svelte 相当陌生(我使用的是版本 2,直到 3 版正确发布),我正在构建一个旨在进行一些音频分析 (FFT) 的站点。因此,我将古老的 ToneJS 库 ( http://tonejs.github.io/ ) 合并到我的一个组件中。

出于某种原因,仅仅导入 ToneJS 就足以让整个应用程序崩溃。

这是我的 Svelte 组件的全部内容:

这会导致错误:

这可能不是 Svelte 特有的,但我已经在许多其他项目(包括 React 内部等)中成功使用了 Tone JS,没有遇到任何问题。

这可能是什么原因造成的?以及如何在我的 Svelte 应用程序中开始使用 ToneJS?(使用 Rollup 打包/转译)