怎样对 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层及其以上嵌套的时候更是如此。

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

上一篇:3DMAX渲染真实火炬效果教程


下一篇:[Linux]sed命令