微信小程序双向数据绑定,父子传参

阳光穿透心脏的1/2处 2022-12-29 00:30 162阅读 0赞

### 单向绑定语法 ###

1.普通的属性的绑定是单向的。例如：

解析：

> 如果使用 `this.setData({ value: 'leaf' })` 来更新 `value` ，`this.data.value` 和输入框的中显示的值都会被更新为`leaf`；  
> 但如果用户修改了输入框里的值，却不会改变 `this.data.value`。

### 双向绑定语法 ###

对应属性前加入`model:`前缀：

> 用户输入的同时改变 this.data.value

##### 局限性： #####

与vue相比，暂不支持表达式形式，如下

data: { 
       a:{ b:'hello'}
        }

### 自定义组件(子组件)向父组件传参数 ###

双向绑定同样可以使用在自定义组件上

**自定义组件的js文件，接收父组件传递的数据myValue**

// custom-component.js
    Component({ 
      properties: { 
        myValue: String
      }
    })

**自定义组件的wxml文件，修改父组件传来的数据myValue**

<input model:value="{ {myValue}}" />

**父组件中使用自定义组件custom-component**

<custom-component model:my-value="{ {pageValue}}" />

> 当输入框的值变更时，自定义组件的 `myValue`属性会同时变更，父组件页面的 `this.data.pageValue` 也会同时变更，页面 WXML 中所有绑定了 `pageValue`的位置也会被一同更新。

### 自定义组件(子组件)还可以这样向父组件传参数 ###

// custom-component.js
    Component({ 
      properties: { 
        myValue: String
      },
      methods: { 
        update: function() { 
          // 更新 myValue
          this.setData({ 
            myValue: 'leaf'
          })
        }
      }
    })

父组件传参到子组件

<custom-component model:my-value="{ {pageValue}}" />

当自定义组件（子组件）使用 `setData`更新 `myValue` 时，父组件页面的 `this.data.pageValue` 也会同时变更，页面 WXML 中所有绑定了 `pageValue`的位置也会被一同更新。