微信小程序：双向数据绑定和组件_微信小程序子组件绑定多个事件

双向数据绑定

需求：输入框的值发生改变，实时显示在view标签 —— 双向绑定；

1.在page的data中定义一个数据：inputvalue；

2.为输入框绑定事件（值改变事件）； —— 新事件

3.事件触发时获取输入框值更新data里的inputvalue；

wxml：

<view>
input:{{inputvalue}}
</view>
<view>
<input type="text" class="ipt" value="{{inputvalue}}" bindinput="changeipt"/>
<input type="text" class="ipt" model:value="{{inputvalue}}"/>
</view>
1
2
3
4
5
6
7

changgeipt：

 changeipt(e){
         console.log(e);
         this.setData({
           inputvalue:e.detail.value
         })
    }
1
2
3
4
5
6

效果：

自定义组件

组件是为了提高复用率，提高开发效率

在根目录创建components文件夹
在文件夹中创建自定义组件名称的文件夹
右键-》新建Component

如果某个页面需要引用组件
需要在json中告诉小程序引入哪个组件

{
  "usingComponents": {
    "cirimg":"/components/cirimg/cirimg"
  }
}
1
2
3
4
5

组件传参：
父传子：

父组件：

<!-- 父组件向子组件传递数据 -->
<cirimg titles="花甲粉" ></cirimg>
<cirimg titles="拉面" ></cirimg>
<cirimg titles="黄焖鸡" ></cirimg>
<cirimg titles="米饭" ></cirimg>
<cirimg  ></cirimg>
1
2
3
4
5
6

组件js：

// components/cirimg/cirimg.js
Component({
  /* 用来接收父组件的数据  */
  properties: {
    // 接收数据的名称
    titles:{
      // 这个数据是什么类型
      //  Object String  Number Array Boolean
      type:String,
      // 默认值(人家不传递 titles= 默认值 )
      value:"白粥"
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

子组件wxml；

<view class="cirimg">{{titles}}</view>
1