创建组件

  1. const component = new Component(options);

一个客户端组件——即用generate: 'dom'编译的组件（或者generate选项未指定）是一个JavaScript类。

  1. import App from './App.svelte';
  3. const app = new App({
  4.   target: document.body,
  5.   props: {
  6.     // 假设App.svelte包含如下内容：
  7.     // `export let answer`:
  8.     answer: 42
  9.   }
  10. });

可以提供以下初始化选项：

选项 默认值 描述
target 无 一个HTMLElement或ShadowRoot，用于渲染。这个选项是必需的
anchor null target的子元素，组件将立即在此元素前渲染
props {} 供应给组件的属性对象
context new Map() 供应给组件的根级别上下文键值对的Map
hydrate false 见下文
intro false 如果为true，将在初始渲染时播放过渡效果，而不是等待后续状态变化

target的现有子元素将保持原位。

hydrate选项指示Svelte升级现有的DOM（通常来自服务器端渲染）而不是创建新元素。它只有在组件使用hydratable: true选项编译时才有效。<head>元素的hydration只有在服务器端渲染代码也使用hydratable: true编译时才能正常工作，这会在<head>的每个元素上添加标记，以便组件知道在hydration期间它负责删除哪些元素。

与通常target的子元素保持不变不同，hydrate: true将导致任何子元素被移除。因此，anchor选项不能与hydrate: true一起使用。

现有的DOM不需要与组件匹配——Svelte会在进行过程中“修复”DOM。

index.js

  1. import App from './App.svelte';
  3. const app = new App({
  4.   target: document.querySelector('#server-rendered-html'),
  5.   hydrate: true
  6. });

$set

  1. component.$set(props);

在实例上以编程方式设置props。component.$set({ x: 1 })等同于组件<script>块内的x = 1。

调用此方法会为下一个微任务安排更新——DOM不会被同步更新。

  1. component.$set({ answer: 42 });

$on

  1. component.$on(ev, callback);

当组件派发一个event时，会调用callback函数。

返回一个函数，当调用该函数时，将移除事件监听器。

index.js

  1. const off = component.$on('selected', (event) => {
  2.   console.log(event.detail.selection);
  3. });
  5. off();

$destroy

  1. component.$destroy();

从DOM中移除组件并触发任何onDestroy处理程序。

组件props

  1. component.prop;
  1. component.prop = value;

如果组件使用accessors: true编译，则每个实例将对应于组件的每个prop具有getter和setter。设置值将导致同步更新，而不是component.$set(...)导致的默认异步更新。

默认情况下，accessors是false，除非你将其编译为自定义元素。

index.js

  1. console.log(component.count);
  2. component.count += 1;