uni-app的组件能引用组件吗

uni-app的组件能引用组件吗

问题是这样的，我接手一个代码，上面报错组件未注册，因为里面是组件引用组件，但如果改成页面引用组件就不会出错，所以想问下uniapp是不支持组件引用组件吗？引用方式都是一样的导入，注册，使用。

image

2 回复

肯定是支持的，可能是你项目中有什么限制，建议你查看一下有什么配置内容

更多关于uni-app的组件能引用组件吗的实战教程也可以访问 https://www.itying.com/category-93-b0.html


当然可以，uni-app 支持组件嵌套引用，即一个组件内部可以引用其他组件。这极大地提高了代码的复用性和模块化。下面是一个简单的代码示例，展示如何在 uni-app 中实现组件引用组件。

1. 创建基础组件 BaseComponent.vue

首先，我们创建一个基础组件，比如一个简单的按钮组件。

<!-- components/BaseComponent.vue -->
<template>
  <view class="base-component">
    <button @click="handleClick">点击我</button>
  </view>
</template>

<script>
export default {
  name: 'BaseComponent',
  methods: {
    handleClick() {
      this.$emit('button-click');
    }
  }
}
</script>

<style scoped>
.base-component {
  padding: 20px;
}
button {
  background-color: #1aad19;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
}
</style>

2. 创建嵌套组件 NestedComponent.vue

然后，我们创建一个嵌套组件，这个组件内部引用 BaseComponent。

<!-- components/NestedComponent.vue -->
<template>
  <view class="nested-component">
    <BaseComponent @button-click="handleButtonClick" />
  </view>
</template>

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

export default {
  name: 'NestedComponent',
  components: {
    BaseComponent
  },
  methods: {
    handleButtonClick() {
      uni.showToast({
        title: '按钮被点击了',
        icon: 'success'
      });
    }
  }
}
</script>

<style scoped>
.nested-component {
  padding: 40px;
}
</style>

3. 在页面中使用嵌套组件

最后，我们在页面中使用 NestedComponent。

<!-- pages/index/index.vue -->
<template>
  <view class="content">
    <NestedComponent />
  </view>
</template>

<script>
import NestedComponent from '../../components/NestedComponent.vue';

export default {
  components: {
    NestedComponent
  }
}
</script>

<style>
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
</style>

以上代码展示了如何在 uni-app 中实现组件引用组件。通过这种方式，你可以将复杂的界面拆分成多个小的、可复用的组件，提高代码的可维护性和可读性。

回到顶部