uni-app nvue如何使用挂载的appvue组件或功能

uni-app nvue如何使用挂载的appvue组件或功能

为什么nvue里面不能使用挂载的appvue的东西，现在可以了吗?

现在很多公用的东西都在main.JS里挂载了。现在用nvue写列表里面的使用挂账的都不能用

3 回复

同时在app.vue里面挂载到globalData里面就可以使用了，在文档里面搜g…

更多关于uni-app nvue如何使用挂载的appvue组件或功能的实战教程也可以访问 https://www.itying.com/category-93-b0.html


感谢。。

在uni-app中，nvue页面主要用于高性能的原生渲染，特别是在需要频繁更新UI或处理复杂动画的场景中。而Vue页面（app.vue或page.vue）则提供了更丰富的组件和功能支持。要在nvue页面中使用挂载的Vue组件或功能，你可以通过createSelectorQuery和postMessage等方法来实现通信。以下是一个基本的实现示例：

1. 在Vue页面（如MyComponent.vue）中定义组件和功能

<template>
  <view>
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from Vue Component!'
    };
  },
  methods: {
    updateMessage(newMessage) {
      this.message = newMessage;
    }
  },
  mounted() {
    // 监听来自nvue页面的消息
    window.addEventListener('message', (event) => {
      if (event.data && event.data.action === 'updateMessage') {
        this.updateMessage(event.data.message);
      }
    });
  }
};
</script>

2. 在nvue页面中嵌入并通信

<template>
  <div>
    <frame src="/pages/MyComponent/MyComponent" id="vue-frame" style="width: 100%; height: 100%;"></frame>
    <button @click="sendMessageToVue">Send Message to Vue</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessageToVue() {
      const vueFrame = this.$refs.vueFrame; // 注意：nvue中无法直接获取DOM元素，这里仅为示意
      // 实际应使用 createSelectorQuery 或其他方式获取frame的上下文
      // 此处简化为直接通过 window.postMessage 发送消息（假设已正确获取上下文）
      window.postMessage({
        action: 'updateMessage',
        message: 'Hello from nvue Page!'
      }, '*'); // 注意：'*' 表示接受所有来源的消息，生产环境中应指定具体来源以提高安全性
    }
  }
};
</script>

注意：在nvue页面中，由于原生组件的限制，无法直接使用ref或document.getElementById来获取DOM元素。你需要使用uni.createSelectorQuery来查询并获取Vue页面的frame上下文，然后通过该上下文发送消息。此外，由于nvue和Vue页面运行在不同的环境中，直接通信需要通过postMessage进行。

上述代码仅为概念性示例，实际项目中需要根据具体情况调整，特别是如何安全且有效地在nvue和Vue页面间传递消息和引用。

回到顶部