В соответствии с Документация Svelte по Props я использую реквизиты для передачи ссылки на родительский компонент дочернему элементу.
Props, short for 'properties', are the means by which you pass data down from a parent to a child component
Это именно то, чем я хочу заниматься. Вот Svelte REPL с моим кодом, который также скопирован ниже:
Мой родитель - App.html:
<div class='widget-container'>
<Widget foo bar = "static" {baz}/>
</div>
<script>
import Widget from './Widget.html';
export default {
data: function(){
return {
baz: 'click me and check the console'
}
},
components: {
Widget
}
};
</script>
Дочерний компонент - Widget.html:
<p>foo: {foo}</p>
<p>bar: {bar}</p>
<p>baz: {baz}</p>
<script>
export default {
oncreate: function(){
window.document.body.addEventListener('click', function(event){
console.info(`Clicked!, ${baz}`)
});
}
}
</script>
Благодаря props элементы HTML <p>
могут четко ссылаться на родительский элемент. Однако как я могу ссылаться на значения в родительском компоненте в JavaScript дочернего компонента?
🤔 А знаете ли вы, что...
JavaScript поддерживает модульную структуру, что способствует организации кода на больших проектах.
Внутри хуков и методов жизненного цикла состояние доступа с this.get()
:
<p>foo: {foo}</p>
<p>bar: {bar}</p>
<p>baz: {baz}</p>
<script>
export default {
oncreate: function(){
window.document.body.addEventListener('click', () => {
const { baz } = this.get();
console.info(`Clicked!, ${baz}`)
});
}
}l
</script>