Using svelte components as templates
Alternate title: 'Passing variables into svelte pages'
Often you want the same layout across different pages. So instead of creating the same code every time, you can create a template and only insert the content you need.
Below is our template component, titled Nested.svelte
html
<script>
export let answer;
export let question;
</script>
<p>The question is: {question}</p>
<p>The answer is {answer}</p>
Contents of +page.svelte
html
<Nested question={'What is the meaning of life the universe, and everything?'}/> answer={42}
<Nested question={'What's this?'} answer={'Nothing'} />
You can reuse the same component on one page as many times as we want. Whatever we define as the question and answer will always get added to text that labels wether we're stating the question or the answer.
Output:
The question is: What is the meaning of life the universe, and everything?
The answer is 42
The question is: What's this?
The answer is nothing