uni-app HBX3.4.7 nvue在vue2中，无法通过Vue.prototype.vk = vk 方式给vue的this赋值，vue3也不行

uni-app HBX3.4.7 nvue在vue2中，无法通过Vue.prototype.vk = vk 方式给vue的this赋值，vue3也不行

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win10
HBuilderX类型 正式
HBuilderX版本号 3.4.7
手机系统 全部
手机厂商 苹果
页面类型 nvue
vue版本 vue2
打包方式 云端
项目创建方式 HBuilderX

测试过的手机：

  • iphone 12
  • 小米5

示例代码：

pages/index/index.nvue 代码

<template>  
    <view>  
        vk.a的值是：{{ vk.a }}  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            }  
        },  
        onLoad() {  

        },  
        methods: {  

        }  
    }  
</script>  

<style>  

</style>

main.js 代码

import App from './App'  

// #ifndef VUE3  
import Vue from 'vue'  
Vue.config.productionTip = false  
App.mpType = 'app'  
const app = new Vue({  
    ...App  
})  
Vue.prototype.vk = {  
    a:1  
}  
app.$mount()  
// #endif  

// #ifdef VUE3  
import { createSSRApp } from 'vue'  
export function createApp() {  
  const app = createSSRApp(App)  
    app.config.globalProperties.vk = {  
        a:1  
    }  
  return {  
    app  
  }  
}  
// #endif

操作步骤：

  • 1、直接通过hbx创建空白项目
  • 2、就1个页面，页面代码复制上面代码示例里的index.nvue代码
  • 3、复制上面实例代码中的main.js代码
  • 4、运行到app
  • 5、会发现报错，vk没有定义

预期结果：

  • 正常运行

实际结果：

  • 会报错，vk变量没有定义

bug描述：

HBX3.4.7 nvue在vue2和vue3模式下，均无法通过Vue.prototype.vk = vk或app.config.globalProperties.vk = vk方式给vue的this赋值


更多关于uni-app HBX3.4.7 nvue在vue2中，无法通过Vue.prototype.vk = vk 方式给vue的this赋值，vue3也不行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

nvue中的Vue本身就是互相隔离的，不能互通设置

更多关于uni-app HBX3.4.7 nvue在vue2中，无法通过Vue.prototype.vk = vk 方式给vue的this赋值，vue3也不行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


好吧

在 uni-app 中使用 nvue 时，如果你想在 Vue2 或 Vue3 中通过 Vue.prototype 或 app.config.globalProperties 给 this 赋值，可能会遇到一些问题。以下是一些解决方案和注意事项：

1. Vue2 中的解决方案

在 Vue2 中，你可以通过 Vue.prototype 来添加全局属性或方法。如果你在 nvue 中遇到问题，可以尝试以下方法：

import Vue from 'vue';
import vk from './vk'; // 假设 vk 是你想要挂载的对象

Vue.prototype.$vk = vk;

然后在组件中通过 this.$vk 来访问 vk 对象。

2. Vue3 中的解决方案

在 Vue3 中，Vue.prototype 被替换为 app.config.globalProperties。你可以通过以下方式来添加全局属性或方法：

import { createApp } from 'vue';
import App from './App.vue';
import vk from './vk'; // 假设 vk 是你想要挂载的对象

const app = createApp(App);
app.config.globalProperties.$vk = vk;
app.mount('#app');

然后在组件中通过 this.$vk 来访问 vk 对象。

3. 在 nvue 中的注意事项

nvue 是 uni-app 中的一种原生渲染模式，它与传统的 Vue 页面有一些不同。如果你在 nvue 中遇到问题，可以尝试以下方法：

  • 确保 nvue 页面支持 Vue 的全局属性：nvue 页面在某些情况下可能不支持 Vue.prototype 或 app.config.globalProperties，因此你可以尝试在组件内部直接引入 vk 对象，而不是通过全局挂载的方式。

  • 使用 uni 提供的全局变量：uni-app 提供了一些全局变量和方法，你可以通过 uni.vk 或 uni.$vk 来访问 vk 对象。

4. 替代方案

如果以上方法都无法解决你的问题，你可以考虑使用 provide/inject 或者 Vuex 来共享 vk 对象。

使用 provide/inject：

// 在根组件中
import { provide } from 'vue';
import vk from './vk';

export default {
  setup() {
    provide('$vk', vk);
  }
};

// 在子组件中
import { inject } from 'vue';

export default {
  setup() {
    const vk = inject('$vk');
    return { vk };
  }
};

使用 Vuex：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import vk from './vk';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    vk: vk
  }
});

// 在组件中
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['vk'])
  }
};
回到顶部