uni-app中window.app.component的使用

uni-app中window.app.component的使用

解决方案

<component v-bind:is="currentView" ref="component"></component>

import demo from "./demo.vue"

this.currentView = 'demo'

这样写不行。

window.app.component('demo', {
template: `<div>111111</div>`,
});

这样都可以。

window.app.component('demo', demo);

怎么解决这个问题？

window.app.component('demo', {
template: `<div>111111</div>`,
});

更多关于uni-app中window.app.component的使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app中window.app.component的使用的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中，window.app.component 并不是一个标准的API或用法。uni-app 是基于 Vue.js 开发的一个跨平台框架，用于构建可以在多个平台（如 H5、小程序、App等）上运行的应用。在uni-app中，我们通常使用 Vue 的组件机制来定义和复用组件。

不过，如果你想在全局注册一个组件，使得它在多个页面或组件中都可以直接使用，你可以在 main.js 文件中进行全局注册。以下是一个如何在uni-app中全局注册并使用组件的示例：

1. 创建全局组件

首先，创建一个新的 Vue 组件文件，比如 MyGlobalComponent.vue：

<template>
  <view class="my-global-component">
    <text>{{ message }}</text>
  </view>
</template>

<script>
export default {
  name: 'MyGlobalComponent',
  data() {
    return {
      message: 'Hello, I am a global component!'
    };
  }
};
</script>

<style scoped>
.my-global-component {
  padding: 20px;
  background-color: #f0f0f0;
}
</style>

2. 在 main.js 中全局注册组件

接下来，在 main.js 中引入并注册这个组件：

import Vue from 'vue';
import App from './App';
import MyGlobalComponent from './components/MyGlobalComponent.vue'; // 路径根据实际情况调整

// 全局注册组件
Vue.component('MyGlobalComponent', MyGlobalComponent);

Vue.config.productionTip = false;

App.mpType = 'app';

const app = new Vue({
    ...App
});
app.$mount();

3. 在页面或组件中使用全局组件

现在，你可以在任何一个页面或组件中直接使用这个全局注册的组件，而不需要再次引入和注册：

<template>
  <view>
    <MyGlobalComponent />
  </view>
</template>

<script>
export default {
  name: 'MyPage'
};
</script>

<style scoped>
/* 页面样式 */
</style>

这样，MyGlobalComponent 就可以在你的整个uni-app项目中被复用，而无需在每个页面或组件中单独引入和注册。这是uni-app中推荐的使用全局组件的方式，而不是使用不存在的 window.app.component。

回到顶部