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

双向数据绑定

微信小程序本身并不直接支持像Vue或Angular这样的框架中的双向数据绑定。但是可以通过一些技巧来模拟实现双向数据绑定的效果。

1. 使用 input 组件的 bindinput 事件：当输入框内容发生变化时，触发 bindinput 事件，然后在事件处理函数中更新数据源。这样可以达到数据从视图到逻辑层的单向流动效果。

   html

   深色版本

   <input type="text" value="{{value}}" bindinput="onInput" />

   javascript

   深色版本

   Page({
     data: {
       value: ''
     },
     onInput(e) {
       this.setData({
         value: e.detail.value
       });
     }
   });

2. 自定义组件中的双向数据绑定：可以在自定义组件中通过 this.triggerEvent 方法发送事件给父组件，从而更新父组件的数据，实现双向绑定。

   html

   深色版本

   <!-- 子组件 -->
   <input type="text" value="{{value}}" bindinput="onInput" />

   javascript

   深色版本

   // 子组件 js
   Component({
     properties: {
       value: String
     },
     methods: {
       onInput(e) {
         const value = e.detail.value;
         this.triggerEvent('change', { value });
       }
     }
   });

   html

   深色版本

   <!-- 父组件 -->
   <custom-input value="{{inputValue}}" bindchange="handleChange" />

   javascript

   深色版本

   // 父组件 js
   Page({
     data: {
       inputValue: ''
     },
     handleChange(e) {
       this.setData({
         inputValue: e.detail.value
       });
     }
   });

父子传参

父传子

父组件向子组件传递参数，主要是通过属性（properties）来完成的。在子组件中定义需要接收的属性，然后在父组件中使用组件标签时指定这些属性的值。

html

深色版本

<!-- 子组件 wxml -->
<view>{{title}}</view>

javascript

深色版本

// 子组件 js
Component({
  properties: {
    title: String
  }
});

html

深色版本

<!-- 父组件 wxml -->
<child-component title="{{pageTitle}}" />

javascript

深色版本

// 父组件 js
Page({
  data: {
    pageTitle: 'Hello World'
  }
});

子传父

子组件向父组件传递信息，通常通过触发事件来实现。子组件调用 this.triggerEvent 方法来触发一个自定义事件，并可携带数据。父组件监听这个自定义事件，一旦事件被触发，就可以执行相应的处理逻辑。

html

深色版本

<!-- 子组件 wxml -->
<button bindtap="handleClick">点击我</button>

javascript

深色版本

// 子组件 js
Component({
  methods: {
    handleClick() {
      this.triggerEvent('childEvent', { message: '这是来自子组件的消息' });
    }
  }
});

html

深色版本

<!-- 父组件 wxml -->
<child-component bindchildEvent="handleChildEvent" />

javascript

深色版本

// 父组件 js
Page({
  methods: {
    handleChildEvent(e) {
      console.log(e.detail.message); // 输出: 这是来自子组件的消息
    }
  }
});

以上就是在微信小程序中实现双向数据绑定和组件间传参的基本方法。希望对你有所帮助！如果有任何更具体的问题或需要进一步的帮助，请随时提问。