面试题：Svelte中Props单向数据流实践基础

在Svelte中通过Props实现父组件向子组件传递数据

父组件传递数据：在父组件中，声明子组件并通过属性（attributes）传递数据。例如：

<script>
  let message = 'Hello from parent';
</script>

<ChildComponent {message} />

这里 {message} 是将父组件中的 message 变量传递给名为 ChildComponent 的子组件。

子组件接收数据：在子组件中，通过声明同名变量来接收Props。例如：

<script>
  export let message;
</script>

<p>{message}</p>

export let message; 声明了一个名为 message 的Props，子组件就可以使用这个变量。

单向数据流工作原理

单向数据流意味着数据从父组件流向子组件，子组件不能直接修改父组件传递过来的数据。这种机制有助于保持数据的可预测性和组件状态的清晰。当父组件的数据发生变化时，Svelte会自动更新子组件中对应的Props，从而更新子组件的视图。例如，如果父组件中的 message 变量发生变化：

<script>
  let message = 'Hello from parent';
  function changeMessage() {
    message = 'New message from parent';
  }
</script>

<button on:click={changeMessage}>Change message</button>
<ChildComponent {message} />

当点击按钮触发 changeMessage 函数时，message 变量的值改变，子组件会自动更新显示新的消息，因为单向数据流会将新的数据从父组件传递到子组件。

子组件试图修改接收到的Props会发生什么

如果子组件试图直接修改接收到的Props，虽然代码可能不会报错，但这违反了单向数据流原则，可能导致不可预测的行为。例如：

<script>
  export let message;
  function tryToChangeProp() {
    message = 'Trying to change prop';
  }
</script>

<button on:click={tryToChangeProp}>Try to change prop</button>
<p>{message}</p>

在这个例子中，点击按钮虽然能改变子组件中 message 的值，但这并不会影响父组件中的 message 值，而且这种修改可能会使组件状态变得混乱，难以调试和维护。

正确处理这种情况的方法

通过事件机制：子组件可以通过 createEventDispatcher 来派发事件，通知父组件数据需要更新。父组件监听这个事件并更新自己的数据，从而通过单向数据流传递新数据给子组件。
- 子组件：

<script>
  import { createEventDispatcher } from'svelte';
  export let message;
  const dispatch = createEventDispatcher();
  function requestChange() {
    dispatch('update-message', 'New value from child request');
  }
</script>

<button on:click={requestChange}>Request parent to update</button>
<p>{message}</p>

- **父组件**：

<script>
  let message = 'Hello from parent';
  function handleUpdate(newMessage) {
    message = newMessage;
  }
</script>

<ChildComponent {message} on:update-message={handleUpdate} />

在这个例子中，子组件通过 dispatch('update-message', 'New value from child request') 派发事件，父组件通过 on:update-message={handleUpdate} 监听事件，并在 handleUpdate 函数中更新自己的 message 值，从而通过单向数据流将新值传递给子组件。

面试题：Svelte中Props单向数据流实践基础

知识考点

面试题答案

在Svelte中通过Props实现父组件向子组件传递数据

单向数据流工作原理

子组件试图修改接收到的Props会发生什么

正确处理这种情况的方法