标签: svelte-component

如何在 svelte 代码中添加自定义函数调用？例如。在 DataTableTest.svelte 中，我想添加 cellFormatter 函数并使其自动调用并渲染 . 以下是代码：

ABC.svelte

import DataTableTest from "./DataTableTest.svelte";

let columns = [
    {
      label: "ABC",
      property: "abc"
    },
    {
      label: "Items",
      property: "items"
    },
    {
      label: "cellFormatter",
      formatter: function(rowIndex, rowData) {
          return "<div>" + rowData[rowIndex] + "</div>";
      }
    }
  ];


let data = [
  {
    "abc": "dsaaads",
    "items": "dsadsads",
  }

</script>


<DataTableTest title="Test" {data} {columns} />

数据表测试.svelte

<script>
  export let title;
  export let data;
  export let columns = [];
</script>

{title}
<table>
  {#if columns} …

我尝试将 Svelte 组件编译为 Web 组件。

1. 添加了选项<svelte:options tag="date-picker" immutable={true}/>
2. 添加customElement: true到汇总中plugins: [ svelte()
3. 跑步npm run build

但我一直收到这样的消息：

(!) 插件 svelte：未指定自定义元素“标签”选项。要自动注册自定义元素，请指定一个带有连字符的名称，例如 。要隐藏此警告，请使用

我究竟做错了什么？

我的index.js文件：

export { default as default } from './DatePicker.svelte';

DatePicker.svelte文件：

<svelte:options tag="date-picker" immutable={true}/>

<script>
  /* code */

汇总文件：

import svelte from 'rollup-plugin-svelte';
import resolve from '@rollup/plugin-node-resolve';
import pkg from './package.json';

const name = pkg.name
    .replace(/^(@\S+\/)?(svelte-)?(\S+)/, '$3')
    .replace(/^\w/, m => m.toUpperCase())
    .replace(/-\w/g, m => m[1].toUpperCase());

export default {
    input: 'src/index.js',
    output: [ …

我正在尝试https://github.com/FormidableLabs/urql/tree/master/packages/svelte-urql人所做的令人惊叹的作品。

直到今天问题为止一切正常。

我正在使用下面的代码，它给了我这个错误：

Error: Function called outside component initialization
  at get_current_component (index.mjs:615)
  at getContext (index.mjs:648)
  at getClient (urql-svelte.mjs:55)
  at query (urql-svelte.mjs:81)
  at Players.svelte:41

代码：

<script>
  import { query } from '@urql/svelte'
  import { myQuery } from './myQuery'

  let players
  let myVars

  function sleep (ms) {
    return new Promise((resolve) => setTimeout(resolve, ms))
  }

  $: (async () => {
    await sleep(2000) // this gives me the error; removing it make it work
    players = query({
      query: myQuery,
      variables: { ...myVars }, …

如何将数据（例如：导航栏标题）传递到父元素中使用的组件？

<!-- _layout.svelte -->
<script>
  import Nav from "../components/Nav.svelte";
  let navTitle = "MyApp";
</script>

<Nav {navTitle}/>
<slot />

<!-- Nav.svelte -->
<script>
  export let navTitle = "";
</script>
<h1>{navTitle}</h1>

<!-- Login.svelte -->
How to pass navTitle value from here to Nav.svelte?

需要澄清的是，这需要可扩展，并且能够使用 Routify 处理 SPA 的所有路由的页面加载/转换，最好提供默认值并能够具有 HTML 值：

<!-- Article.svelte -->

<!-- User.svelte -->
navTitle is '<a href="/user">My Account </a>'

<!-- Comment.svelte -->

我有两个组件在组件树中距离很远，我对如何在两者之间进行通信存有疑问。我有搜索组件、listItems 和商店。

商店.svelte

<script context="module" lang="ts">
 import type {Items} from '../../Models/Items.model';
 import { writable } from 'svelte/store';

 export const dataItems = writable<Items[]>([]);

  const filterInfo = (term:string) => {
     dataItems.update(item => {
           item.filter(x => {
                return x.name.toLowerCase().includes(term.toLowerCase())
                || x.description.toLowerCase().includes(term.toLowerCase());
           })
           return dataItems;
        })
    }*/


export const dispatcher = {filterInfo};

</script>

搜索组件

<script lang="ts">
    import { dispatcher } from './ViewI/store.svelte';
    

    let value:any;

    const handleChange = () => {
     dispatcher.filterInfo(value)
    console.log(value)
     }
    
    
</script>

<Search>
 <input bind:value
 on:input={handleChange}>
</Search>

列表项组件

import type {Items} from …

有没有办法告诉 svelte 不要删除我未使用的样式？

我正在使用 Web 组件，如果 svelte 清除未使用的选择器，则子组件不会设置样式。我希望我可以在汇总中配置一个设置？

我在我的项目中使用 Svelte i18n，它在我的 Svelte 组件中完美运行。

但我有一些 JS 文件（例如常量），我想使用 i18n 来翻译一些键，例如 (in /services/constants.js) ：

import { _ } from 'svelte-i18n'

export const STATUS_OK = 1;
export const STATUS_PENDING = 2;
export const STATUS_ERROR = 3;
export const STATUS_INACTIVE = 4;
export const STATUS_PRICE_NOT_FOUND = 5;

export const STATUTES = {
  [STATUS_OK]: {
    text: _('urls.statutes.ok'),
    class: 'text-green-500',
  },

但我得到一个错误，我可以_在 JS 文件中使用函数吗？或者我应该创建一种简洁的组件来处理我的常量？

我是第一次探索 SvelteKit，我构建了我的第一个简单应用程序，我想将其作为静态页面部署到我的 Apache 服务器

据我了解适配器静态是可行的方法，所以我安装了它并将我的svelte.config.js文件更改为：

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-static';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    preprocess: preprocess(),

    kit: {
        adapter: adapter({
            paths: { base: "/PERSONAL_PATH" },
            fallback: 'index.html',
            precompress: false,
        })
    }
};

export default config;

现在：

运行npm run build没有任何错误，问题是当我检查index.html页面的所有依赖项（或者样式表和 JS 文件的 URL，如果你愿意的话......）时，有两个问题，如下所示：

1. 具有绝对路径，这使得无法将页面源移动到任何其他位置
2. 不在PERSONAL_PATH我希望的文件夹中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="description" content="" />
        <link rel="icon" href="./favicon.png" />
        <meta …

有没有办法在 svelte 中重命名/别名道具？

例如，如果我有一个需要fooprop 的组件，但我还想要foo当前状态的局部变量，有什么方法可以重命名传入的 prop，如下所示：

export let foo as forceFoo;
let foo = forceFoo | null;

通常正确答案是以下两个之一：

1. 将道具重命名为类似的名称initialFoo
2. 重命名状态

在这种情况下，重命名 prop 是不合适的 - 它是组件的公共 API，它不是初始状态，它是强制该字段值的可选覆盖。

重命名状态对于单个字段来说是可以的，并且通常对于通用组件来说效果很好，但是当组件是具有许多字段的表单并且必须将这些字段传递给希望它们具有正确名称的保存函数时，就会变得可怕且笨拙。

当你看这段代码时：

<script lang="ts">
  import RedThing from "./RedThing.svelte";
  import GreenThing from "./GreenThing.svelte";

  const things: Record<string, typeof RedThing> = {
    red: RedThing,
    green: GreenThing,
  };
</script>

然后一切正常并且是强类型的。typeof RedThing但在我看来，用类似的东西替换会更有意义吗SvelteComponent？但这会导致 TS 错误：Type 'typeof RedThing__SvelteComponent_' is missing the following properties from type 'SvelteComponentDev': $set, $on, $destroy, $$prop_def, and 5 more.

那么 Svelte 组件的“通用”类型是什么？

或者在查看 时<svelte:component this={expression}/>，接受什么类型this？