微信小程序组件与父页面传值示例

在同一个页面的元素，直接用模型标识状态就可以了。

有时候，一些常见的复杂的，或者原生组件没有的，我们需要自定义组件，这个组件在页面上使用的时候，就形成了一个有边界的盒子，这个盒子，我们可以在页面上传入值，组件内部可以获取这个值，然后进行展示或者其他计算。这样，我们的组件就形成了一个动态可变的元素。

那么，问题也来了，组件内部操作完成，怎么通知外部页面做改变呢？因为组件我们相当于是另一个子页面，父页面就是当前引入组件的页面，他们这时候就需要通信。

组件传值，可以通过属性的方式传递，但是属性也有另一种书写方式，就是data-xxx的方式，这种方式传递，当前组件可以获取，形成一个dataset对象。但是这种方式传递的数据，组件无法获取，可以直接通过xxx命名的方式传递。

定义的组件如下所示：

customtest.json

javascript 复制代码

{
  "component": true
}

customtest.wxml

html 复制代码

<view class="page">
      <view bindtap="test">点击测试</view>
      <view>{{width}}</view>
</view>

customtest.wxss

customtest.js

javascript 复制代码

Component({
  properties:{
    width: Number
  },
  data:{},
  methods : {
    test(e) {
      console.log("child node",e)
      let {width} = this.properties;
      this.triggerEvent("change",{width})
    }
  }
})

父级页面使用：

index.json

javascript 复制代码

{
  "usingComponents": {
    "custom-test" : "../../components/customtest"
  }
}

index.wxml

html 复制代码

    <view>
      <custom-test data-width="80" width="90" bindchange="onChange"></custom-test>
    </view>

index.js

javascript 复制代码

  onChange(e) {
    console.log("parent node: ",e)
  }

这里测试的是父级页面通过width属性传入一个90的数据，我们页面显示如下：

当我们点击按钮"点击测试"的时候，先是在当前组件打印了width值，接着通过触发change事件的方式向父页面传值，父页面接收响应，打印传回的值。

打印的数据里面我们看到currentTarget下面有个dataset是我们通过data-width方式设置的80，这个值，父页面可以获取到叫dataset，但是子组件获取不到，子组件传回的数据在detail属性对象里。

我们展开子组件打印信息，它的dataset里面没有width属性。也就是说dataset属性值只能是当前组件可以设置。通过data-xxx的方式无法传递到子组件。但是可以通过xxx直接以properties的方式传递到子组件。

值得注意的是，如果data-xxx的方式传递参数，它会进行转驼峰，比如data-react-width="80",我们在currentTarget.dataset种获取的属性叫reactWidth，如下所示：