如何在Svelte组件之间传递数据和事件
在Svelte组件之间传递数据和事件可以通过props和自定义事件来实现。
- 通过props传递数据:在父组件中通过props将数据传递给子组件。在子组件中通过props属性来接收传递过来的数据。例如:
<!-- ParentComponent.svelte -->
<script>
import ChildComponent from './ChildComponent.svelte';
let data = 'Hello from parent component';
</script>
<ChildComponent data={data} />
<!-- ChildComponent.svelte -->
<script>
export let data;
</script>
<p>{data}</p>
- 通过自定义事件传递数据:在子组件中通过dispatch方法触发自定义事件,并传递数据给父组件。在父组件中监听子组件的自定义事件,并处理传递过来的数据。例如:
<!-- ChildComponent.svelte -->
<script>
import { createEventDispatcher } from 'svelte';
const dispatch = createEventDispatcher();
function sendData() {
const data = 'Hello from child component';
dispatch('customEvent', data);
}
</script>
<button on:click={sendData}>Send Data</button>
<!-- ParentComponent.svelte -->
<script>
import ChildComponent from './ChildComponent.svelte';
let receivedData;
function handleCustomEvent(event) {
receivedData = event.detail;
}
</script>
<ChildComponent on:customEvent={handleCustomEvent} />
<p>{receivedData}</p>
通过以上两种方式,可以在Svelte组件之间传递数据和事件。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo6@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。版权声明:如无特殊标注,文章均为本站原创,转载时请以链接形式注明文章出处。
评论