怎样对 Svelte 组件进行双向数据绑定

正文

Vue 默认是将组件中一个名为 value 的 props 和 一个名为 'input' 的自定义事件作为 v-model 的配置项，从而实现自定义组件的双向绑定功能。而 Svelte 中的双向数据绑定则灵活得多，它被称为“组件绑定”，也就是对子组件暴露出来的 props 直接使用 bind:xxx 进行。这样确实十分方便，但也会造成数据源难以定位的问题，所以官网有了下面这句话：

谨慎使用组件绑定。如果你的应用程序中的数据过多，尤其是在没有“统一数据来源”的情况下，可能很难跟踪应用程序周围的数据流。

下面是使用示例：

首先定义一个常规的子组件：Child.svelte，这里跟 React 和 Vue 有明显区别：可以直接双向绑定 props

<script>
  export let value;
</script>

<input type="text" bind:value />

然后再父组件 App.svelte 中再次双向绑定一下：

<script>
  import Child from "./Child.svelte";

  let value = "";
</script>

<Child bind:value />

完事之后，可以望输入框中正常输入字符了，从这一点可以看出，在 Svelte 中，父子组件间通信非常灵活，以至于都有点“随意”了，最好还是不用或者少用，不然都不知道是在哪儿触发的变化，尤其是3层及其以上嵌套的时候更是如此。