zoukankan      html  css  js  c++  java
  • 怎样对 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层及其以上嵌套的时候更是如此。

  • 相关阅读:
    chgrp,chown,chmod用法
    关于linux文件夹与文件的权限理解
    centos7重置root密码
    Mac 下利用 Launchctl 自启动 mysql
    mac 10.10 下编译php拓展之mcrypt
    [转]使用Google地图API搜索功能
    ajax中获取和发送二进制数据的方法
    samba详解
    wamp You don't have permission to access / on this server等问题的解决.
    Cisco3.3.2.2
  • 原文地址:https://www.cnblogs.com/aisowe/p/15245563.html
Copyright © 2011-2022 走看看