微信小程序-data和mark

经过之前的文章介绍，我们已经知道了，在事件当中如何进行数据的传递，那么在介绍当中有两种传递方式，那么这两种方式分别有什么区别呢，我们一起来看看吧~

我们先来看一个情况，就是看一下在元素结构有嵌套与无嵌套情况下我们拿到的currentTatget与target分别拿到的是那个元素信息。

如果不存在嵌套的情况，那么无论currentTatget还是target拿到的都是触发事件的那个元素。

index.wxml:

<view bind:tap="oneTap">我是view</view>

index.js:

Page({
  oneTap: function(event){
    console.log(event);
  }
})

好了，这个是没有嵌套结构关系时的情况，接下来我模拟一个嵌套关系的场景，代码如下：

index.wxml:

<view id="father" capture-bind:tap="onCaptureFatherTap" bind:tap="onFatherTap">
  <view id="son" capture-bind:tap="onCaptureSonTap" bind:tap="onSonTap"></view>
</view>

index.wxss:

/* pages/index/index.wxss */
#father {
    width: 400px;
    height: 400px;
    background: #0099FF;
}
#son {
    width: 320px;
    height: 320px;
    background: forestgreen;
}

index.js:

Page({
  onCaptureFatherTap: function(event){
    console.log("father捕获：", event);
  },
  onFatherTap: function(event){
    console.log("father冒泡：", event);
  },
  onCaptureSonTap: function(event){
    console.log("son捕获：", event);
  },
  onSonTap: function(event){
    console.log("son冒泡：", event);
  },
})

然后我们在微信小程序开发工具当中运行这个代码，点击 son，运行代码得到了每个捕获和冒泡方法当中的currentTatget与target信息分别是什么元素：

onCaptureFatherTap：

• currentTatget：father
• target：son

onFatherTap：

• currentTatget：father
• target：son

onCaptureSonTap：

• currentTatget：son
• target：son

onSonTap：

• currentTatget：son
• target：son

好了看了下运行结果之后，这里我来做一个小小的总结：

!> 无论是捕获还是冒泡

• currentTatget：拿到的都是绑定这个事件的那个元素
• target：拿到的都是触发事件的那个元素

好了，看了这个内容之后我现在来进行使用data或者mark来传递数据了。首先我使用data来进行传递，这个传递是数据我写在father组件当中，这个时候我如果想要在son当中拿到father当中的数据该如何获取这个是我的一个需求：

!> 好了这里我也不卖关子了，其实通过data-xxx绑定的数据，那么在son的监听方法中是拿不到father当中绑定数据的。

!> 但是呢，我们可以通过 mark，如果是通过mark:xxx绑定的数据，那么在son的监听方法中是可以拿到father数据的

!> mark:xxx 绑定的数据会将所有祖先元素子元素的数据都融合在一起

我们在father通过mark绑定一个数据然后在son当中也使用mark绑定一下数据就可以证明我说的这一点代码和效果如下图所示：

index.wxml:

<view mark:name="BNTang" id="father" capture-bind:tap="onCaptureFatherTap" bind:tap="onFatherTap">
  <view mark:age="18" id="son" capture-bind:tap="onCaptureSonTap" bind:tap="onSonTap"></view>
</view>