mirror of https://github.com/sveltejs/svelte
41 lines
728 B
41 lines
728 B
<script>
|
|
import { onDestroy } from 'svelte';
|
|
|
|
const emojis = {
|
|
apple: '🍎',
|
|
banana: '🍌',
|
|
carrot: '🥕',
|
|
doughnut: '🍩',
|
|
egg: '🥚'
|
|
};
|
|
|
|
// the name is updated whenever the prop value changes...
|
|
export let name;
|
|
|
|
// ...but the "emoji" variable is fixed upon initialisation of the component
|
|
const emoji = emojis[name];
|
|
|
|
// observe in the console which entry is removed
|
|
onDestroy(() => {
|
|
console.log('thing destroyed: ' + name);
|
|
});
|
|
</script>
|
|
|
|
<p>
|
|
<span>The emoji for {name} is {emoji}</span>
|
|
</p>
|
|
|
|
<style>
|
|
p {
|
|
margin: 0.8em 0;
|
|
}
|
|
span {
|
|
display: inline-block;
|
|
padding: 0.2em 1em 0.3em;
|
|
text-align: center;
|
|
border-radius: 0.2em;
|
|
color: #333333;
|
|
background-color: #ffdfd3;
|
|
}
|
|
</style>
|