uni-app nvue引入vue组件时，获取data-*的数据结构不正确，且整页为vue情况下，子组件@tap事件无法获取data-*的数据

在uni-app中，nvue页面与vue页面存在一些差异，特别是在处理自定义属性和事件时。针对你提到的问题，我们分别来看如何在nvue中引入vue组件并正确获取data-*属性，以及如何在整页为vue的情况下让子组件的@tap事件获取data-*的数据。

1. 在nvue中引入vue组件并获取data-*属性

在nvue中引入vue组件时，由于nvue和vue的渲染机制不同，直接操作DOM或获取自定义属性可能会遇到问题。一个推荐的解决方案是通过事件机制传递数据。

Vue组件（MyComponent.vue）:

<template>
  <view @tap="handleTap">
    <!-- 其他内容 -->
  </view>
</template>

<script>
export default {
  methods: {
    handleTap(event) {
      // 假设data-info是你要传递的数据
      const dataInfo = event.currentTarget.dataset.info;
      this.$emit('tap-event', dataInfo);
    }
  }
}
</script>

nvue页面:

<template>
  <page>
    <stack>
      <frame src="/pages/MyComponent/MyComponent.vue" @tap-event="handleVueTapEvent" />
      <!-- 注意：这里实际上不能直接监听vue组件的事件，需要通过其他方式通信，如全局事件总线 -->
    </stack>
  </page>
</template>

<script>
export default {
  methods: {
    handleVueTapEvent(data) {
      console.log('Vue组件传递的数据:', data);
    }
  },
  mounted() {
    // 假设使用了一个全局事件总线来监听vue组件的事件
    globalEventBus.$on('tap-event', this.handleVueTapEvent);
  },
  beforeDestroy() {
    globalEventBus.$off('tap-event', this.handleVueTapEvent);
  }
}
</script>

注意：由于nvue与vue之间的通信限制，这里示例了通过全局事件总线（需自行实现）来传递事件，实际项目中可能需要根据具体情况调整。

2. 在整页为vue的情况下，子组件@tap事件获取data-*的数据

在纯vue页面中，获取data-*属性相对简单，可以直接在事件处理函数中通过event.currentTarget.dataset访问。

父组件:

<template>
  <MyComponent data-info="someData" @tap="handleChildTap" />
</template>

<script>
import MyComponent from './MyComponent.vue';

export default {
  components: { MyComponent },
  methods: {
    handleChildTap(event) {
      const dataInfo = event.detail.dataInfo; // 假设子组件通过detail传递了数据
      console.log('子组件传递的数据:', dataInfo);
    }
  }
}
</script>

子组件（MyComponent.vue）:

<template>
  <view @tap="handleTap">点击我</view>
</template>

<script>
export default {
  methods: {
    handleTap(event) {
      const dataInfo = event.currentTarget.dataset.info;
      this.$emit('tap', { dataInfo });
    }
  }
}
</script>

这样，父组件就可以正确接收到子组件通过@tap事件传递的data-*数据了。