uniapp JS文件里面调用自定义组件（不用每个页面在template中加组件标签）

**UniApp 中的自定义组件**

在 UniApp 开发中，自定义组件是非常重要的一部分。通过创建自定义组件，我们可以重用代码，提高开发效率，并且使得我们的应用更加模块化和易维护。

在本文中，我们将讨论如何在 UniApp 中的 JS 文件中调用自定义组件。我们将使用 Vue 的组件系统来实现这一点。

### **创建自定义组件**

首先，让我们创建一个简单的自定义组件，例如 `my-button` 组件。这个组件包含一个按钮和一些样式。

html<!-- my-button.vue -->
<template>
 <view class="my-button">
 <button @click="handleClick">点击我</button>
 </view>
</template>

<script>
export default {
 methods: {
 handleClick() {
 console.log('按钮被点击了！');
 }
 }
}
</script>

<style scoped>
.my-button {
 width:100px;
 height:50px;
 background-color: #4CAF50;
 color: #fff;
 border-radius:5px;
 text-align: center;
}

button {
 width:100%;
 height:100%;
}
</style>

### **在 JS 文件中调用自定义组件**

现在，我们需要在 JS 文件中调用这个 `my-button` 组件。我们可以使用 Vue 的 `createComponent` 方法来实现这一点。

javascript// index.jsimport myButton from './components/my-button.vue';

Page({
 data: {
 // ...
 },
 onShow() {
 const button = uni.createComponent(myButton);
 this.$refs.button = button;
 }
});

在上面的代码中，我们首先导入了 `my-button` 组件，然后在 `onShow` 方法中创建了一个 `my-button` 实例，并将其赋值给 `$refs.button`。

### **使用自定义组件**

现在，我们可以在模板中使用这个自定义组件。

html<!-- index.wxml -->
<template>
 <view>
 <button ref="button" class="my-button"></button>
 </view>
</template>

<style scoped>
.my-button {
 width:100px;
 height:50px;
 background-color: #4CAF50;
 color: #fff;
 border-radius:5px;
 text-align: center;
}

button {
 width:100%;
 height:100%;
}
</style>

在上面的代码中，我们使用 `ref` 属性将自定义组件的实例赋值给 `$refs.button`。

### **总结**

通过本文，我们学习了如何在 UniApp 中的 JS 文件中调用自定义组件。我们使用 Vue 的组件系统来实现这一点，并且展示了一个简单的示例。

希望这篇文章对你有所帮助。如果你有任何问题或建议，请随时告诉我！