Svelte 組件擴充

在 Svelte 掛載應用程式和初始化 Framework7 之後，我們可以存取 Framework7 的已初始化實例，以及一些可以從 framework7-svelte 套件匯入的其他有用屬性。

f7ready

這是一個當 Framework7 完全初始化時執行的回呼函式。當您需要存取 Framework7 API 並確保它已準備就緒時，在元件中使用它很有用。因此，將所有與 Framework7 相關的邏輯放入這個回呼函式中是安全的。它接收已初始化的 Framework7 實例作為參數。例如

...
<script>
  import { onMount } from 'svelte';
  import { f7ready } from 'framework7-svelte';

  onMount(() => {
    f7ready(() => {
      // Framework7 initialized
      f7.dialog.alert('Component mounted');
    })
  })
</script>

f7

Framework7 的主要已初始化實例。它允許您使用任何 Framework7 API。

如果您確定在存取 Framework7 實例時，它已經初始化，您可以直接匯入並使用它

<script>
  import { f7 } from 'framework7-svelte';

  const doSomething = () => {
    f7.dialog.alert('Hello world');
  }

  // ...
</script>

theme

它是一個布林屬性物件，其中包含有關目前使用主題（iOS 或 MD）的資訊：theme.ios、theme.md。

<script>
  import { theme } from 'framework7-svelte';

  if (theme.ios) {
    console.log('Currently active theme is iOS-theme')
  }

  // ...
</script>

f7route 和 f7router

路由器實例和目前路由透過 props 傳遞給路由器元件

這些屬性僅適用於使用路由器載入的元件（例如頁面、可路由模式對話框、可路由標籤）。如果您需要在「更深層」的子元件中存取這個屬性，則需要使用 props 將它傳遞下去。

<script>
  import { onMount } from 'svelte';
  // define props so the component will receive it
  export let f7route;
  export let f7router;

  onMount(() => {
    console.log(f7route.url)
  });

  const navigate = () => {
    f7router.navigate('/some-page/');
  }
  // ...
</script>

f7route 是目前路由，物件具有下列屬性

• url - 路由 URL
• path - 路由路徑
• query - 包含路由查詢的物件。如果 URL 是 /page/?id=5&foo=bar，則它將包含下列物件 {id: '5', foo: 'bar'}
• params - 路由參數。如果我們有與 /page/user/:userId/post/:postId/ 路徑和頁面 URL 為 /page/user/55/post/12/ 相符的路由，則它將是下列物件 {userId: '55', postId: '12'}
• name - 路由名稱
• hash - 路由 URL hash
• route - 包含可用路由中相符路由的物件

插槽

所有 Framework7 Svelte 元件都使用 插槽 來在元件結構中分配子元件。但由於 Svelte 的限制，不允許在自訂元件上使用插槽，因此有時您可能需要使用虛擬 HTML 元素或使用 HTML 版面配置。

例如

<Page>
  <List>
    <ListItem title="Toggle">
      <!-- wrap with extra element -->
      <span slot="after">
        <Toggle />
      </span>
    </ListItem>
  </List>
</Page>

事件

所有 Framework7 Svelte 元件都支援事件。但 Svelte 處理事件的方式（透過發出 CustomEvent）在我們需要取得事件參數（透過 event.detail）時會不方便，尤其是有多個參數時。

因此，所有 Framework7 Svelte 元件都發出帶有陣列參數的事件

<Page on:pageInit={onPageInit}>
  <!-- -->
</Page>
<script>
  // pageInit event has one argument with page data
  function onPageInit(event) {
    // it will be available in event.detail array
    const pageData = event.detail[0]
    console.log(pageData);
  }
</script>

為了解決此問題，所有 Framework7 Svelte 組件事件都具有相同的 `on${Event}` prop 回呼

<Page onPageInit={onPageInit}>
  <!-- -->
</Page>
<script>
  // pageInit event has one argument with page data
  function onPageInit(pageData) {
    console.log(pageData);
  }
</script>