Props与组件通信 #

<script>
  export let name = 'World';
  export let count = 0;
  export let items = [];
</script>

<p>Hello {name}!</p>
<p>Count: {count}</p>

<script>
  let { name = 'World', count = 0, items = [] } = $props();
</script>

<p>Hello {name}!</p>
<p>Count: {count}</p>

<script>
  import Child from './Child.svelte';
</script>

<Child name="Svelte" count={42} items={[1, 2, 3]} />

<Child name="React" />

<Child />

<script>
  import Child from './Child.svelte';
  
  let props = {
    name: 'Vue',
    count: 10,
    items: ['a', 'b', 'c']
  };
</script>

<Child {...props} />

<script>
  let { 
    str = '',
    num = 0,
    bool = false,
    arr = [],
    obj = {},
    fn = () => {}
  } = $props();
</script>

<script lang="ts">
  interface Props {
    name: string;
    age?: number;
    items: string[];
    onClick?: (id: number) => void;
  }
  
  let { name, age = 0, items, onClick }: Props = $props();
</script>

<script lang="ts">
  interface User {
    id: number;
    name: string;
    email: string;
  }
  
  interface Props {
    user: User;
    onUpdate: (user: User) => void;
  }
  
  let { user, onUpdate }: Props = $props();
</script>

<script>
  import Input from './Input.svelte';
  
  let value = '';
</script>

<Input bind:value />
<p>Value: {value}</p>

<script>
  let { value = '' } = $props();
</script>

<input bind:value />

<script>
  let { value = $bindable('') } = $props();
</script>

<input bind:value />

<script>
  let { 
    value = $bindable(''),
    checked = $bindable(false),
    items = $bindable([])
  } = $props();
</script>

<input bind:value />
<input type="checkbox" bind:checked />

<script>
  let { 
    email = $bindable(''),
    password = $bindable(''),
    remember = $bindable(false)
  } = $props();
</script>

<div class="form-group">
  <label>Email</label>
  <input type="email" bind:value={email} />
</div>

<div class="form-group">
  <label>Password</label>
  <input type="password" bind:value={password} />
</div>

<label>
  <input type="checkbox" bind:checked={remember} />
  Remember me
</label>

<script>
  import Child from './Child.svelte';
  
  let message = 'Hello from parent';
</script>

<Child {message} />

<script>
  import Child from './Child.svelte';
  
  function handleUpdate(data) {
    console.log('Received from child:', data);
  }
</script>

<Child onUpdate={handleUpdate} />

<script>
  let { onUpdate } = $props();
  
  function sendData() {
    onUpdate?.({ text: 'Hello from child' });
  }
</script>

<button onclick={sendData}>Send to Parent</button>

<script>
  import { createEventDispatcher } from 'svelte';
  
  const dispatch = createEventDispatcher();
  
  function handleClick() {
    dispatch('message', { text: 'Hello' });
  }
</script>

<button on:click={handleClick}>Send Event</button>

<script>
  import Child from './Child.svelte';
  
  function handleMessage(event) {
    console.log(event.detail.text);
  }
</script>

<Child on:message={handleMessage} />

import { writable } from 'svelte/store';

export const sharedState = writable({
  user: null,
  theme: 'light'
});

<script>
  import { sharedState } from './stores.js';
</script>

<button onclick={() => $sharedState.theme = 'dark'}>
  Set Dark Theme
</button>

<script>
  import { sharedState } from './stores.js';
</script>

<p>Current theme: {$sharedState.theme}</p>

<script>
  import { setContext } from 'svelte';
  
  const theme = 'dark';
  const user = { name: 'Alice' };
  
  setContext('theme', theme);
  setContext('user', user);
  
  setContext('config', {
    apiUrl: 'https://api.example.com',
    version: '1.0.0'
  });
</script>

<slot />

<script>
  import { getContext } from 'svelte';
  
  const theme = getContext('theme');
  const user = getContext('user');
  const config = getContext('config');
</script>

<p>Theme: {theme}</p>
<p>User: {user.name}</p>
<p>API: {config.apiUrl}</p>

<script>
  import { setContext } from 'svelte';
  
  let theme = $state('light');
  
  setContext('theme', {
    get value() { return theme; },
    toggle: () => {
      theme = theme === 'light' ? 'dark' : 'light';
    }
  });
</script>

<script>
  import { setContext } from 'svelte';
  
  let theme = $state('light');
  
  setContext('theme', {
    get value() { return theme; },
    set value(v) { theme = v; },
    toggle: () => {
      theme = theme === 'light' ? 'dark' : 'light';
    }
  });
</script>

<div data-theme={theme}>
  <slot />
</div>

<style>
  [data-theme="light"] {
    --bg: #ffffff;
    --text: #000000;
  }
  
  [data-theme="dark"] {
    --bg: #1a1a1a;
    --text: #ffffff;
  }
</style>

<script>
  import { getContext } from 'svelte';
  
  const theme = getContext('theme');
</script>

<button onclick={() => theme.toggle()}>
  {theme.value === 'light' ? '🌙' : '☀️'}
</button>

<script>
  import ThemeProvider from './ThemeProvider.svelte';
  import ThemeToggle from './ThemeToggle.svelte';
  import Content from './Content.svelte';
</script>

<ThemeProvider>
  <header>
    <h1>My App</h1>
    <ThemeToggle />
  </header>
  <Content />
</ThemeProvider>

<script>
  let { } = $props();
</script>

<div class="card">
  <slot />
</div>

<Card>
  <p>This goes into the slot</p>
</Card>

<script>
  let { } = $props();
</script>

<div class="card">
  <header>
    <slot name="header" />
  </header>
  <main>
    <slot />
  </main>
  <footer>
    <slot name="footer" />
  </footer>
</div>

<Card>
  <h2 slot="header">Title</h2>
  <p>Main content goes here</p>
  <p slot="footer">Footer content</p>
</Card>

<script>
  let { items = [] } = $props();
</script>

<ul>
  {#each items as item}
    <li>
      <slot {item} />
    </li>
  {/each}
</ul>

<List items={items} let:item>
  <span>{item.name}: {item.value}</span>
</List>

<script>
  let { header, footer, children } = $props();
</script>

<div class="card">
  <header>
    {@render header?.()}
  </header>
  <main>
    {@render children?.()}
  </main>
  <footer>
    {@render footer?.()}
  </footer>
</div>

<script>
  import Card from './Card.svelte';
  
  let header = snippet(() => <h2>Title</h2>);
  let footer = snippet(() => <p>Footer</p>);
</script>

<Card {header} {footer}>
  <p>Main content</p>
</Card>

<script>
  import Tabs from './Tabs.svelte';
  import Tab from './Tab.svelte';
  import TabPanel from './TabPanel.svelte';
  
  let activeTab = 0;
</script>

<Tabs bind:activeTab>
  <Tab>Tab 1</Tab>
  <Tab>Tab 2</Tab>
  <Tab>Tab 3</Tab>
  
  <TabPanel>
    Content for Tab 1
  </TabPanel>
  <TabPanel>
    Content for Tab 2
  </TabPanel>
  <TabPanel>
    Content for Tab 3
  </TabPanel>
</Tabs>

<script>
  let { data, render } = $props();
  
  let loading = $state(true);
  let result = $state(null);
  
  $effect(() => {
    data().then(r => {
      result = r;
      loading = false;
    });
  });
</script>

{#if loading}
  <p>Loading...</p>
{:else}
  {@render render(result)}
{/if}

<script>
  import DataLoader from './DataLoader.svelte';
  
  let renderData = snippet((data) => (
    <ul>
      {#each data as item}
        <li>{item.name}</li>
      {/each}
    </ul>
  ));
</script>

<DataLoader 
  data={() => fetch('/api/items').then(r => r.json())}
  render={renderData}
/>

<script>
  import { getContext } from 'svelte';
  
  let { component: Component, ...restProps } = $props();
  
  const user = getContext('user');
</script>

{#if user}
  <svelte:component this={Component} {...restProps} />
{:else}
  <p>Please login</p>
{/if}

<script>
  let {
    title,
    isVisible = true,
    onToggle,
    className = '',
    style = {}
  } = $props();
</script>

<script lang="ts">
  interface Props {
    id: number;
    name: string;
    email?: string;
    role: 'admin' | 'user' | 'guest';
    onAction: (action: string) => void;
  }
  
  let { id, name, email, role = 'user', onAction }: Props = $props();
</script>

<script>
  let { 
    title,
    description,
    ...restProps
  } = $props();
</script>

<article>
  <h2>{title}</h2>
  <p>{description}</p>
  <div {...restProps}>
    <slot />
  </div>
</article>

<script lang="ts">
  interface Field {
    name: string;
    label: string;
    type: string;
    required?: boolean;
    placeholder?: string;
  }
  
  interface Props {
    fields: Field[];
    values: Record<string, string>;
    errors?: Record<string, string>;
    onSubmit: (values: Record<string, string>) => void;
    submitText?: string;
  }
  
  let { 
    fields, 
    values = $bindable({}), 
    errors = {},
    onSubmit,
    submitText = 'Submit'
  }: Props = $props();
  
  function handleSubmit(e: Event) {
    e.preventDefault();
    onSubmit(values);
  }
</script>

<form onsubmit={handleSubmit}>
  {#each fields as field}
    <div class="form-group">
      <label for={field.name}>
        {field.label}
        {#if field.required}<span class="required">*</span>{/if}
      </label>
      
      <input
        id={field.name}
        name={field.name}
        type={field.type}
        bind:value={values[field.name]}
        placeholder={field.placeholder}
        required={field.required}
        class:error={errors[field.name]}
      />
      
      {#if errors[field.name]}
        <span class="error-message">{errors[field.name]}</span>
      {/if}
    </div>
  {/each}
  
  <button type="submit">{submitText}</button>
</form>

<style>
  .form-group {
    margin-bottom: 1rem;
  }
  
  label {
    display: block;
    margin-bottom: 0.25rem;
  }
  
  .required {
    color: red;
  }
  
  input {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  input.error {
    border-color: red;
  }
  
  .error-message {
    color: red;
    font-size: 0.8rem;
  }
</style>

<script>
  import Form from './Form.svelte';
  
  let fields = [
    { name: 'email', label: 'Email', type: 'email', required: true },
    { name: 'password', label: 'Password', type: 'password', required: true },
    { name: 'remember', label: 'Remember Me', type: 'checkbox' }
  ];
  
  let values = {};
  let errors = {};
  
  function handleSubmit(values) {
    console.log('Form submitted:', values);
  }
</script>

<Form 
  {fields} 
  bind:values 
  {errors} 
  onSubmit={handleSubmit}
  submitText="Login"
/>