# 组件使用方法

本章节将介绍 Shadow UI 组件的基本使用方法和注意事项，帮助您快速上手使用我们的组件库

# 安装方式

在使Shadow UI 组件之前，您需要先安装组件库。具体安装步骤请参安装指南

# 引入组件

# 全局引入

您可以在项目的入口文件中全局引入所有组件：

import Vue from 'vue'
import ShadowUI from 'shadow-ui3'
import 'shadow-ui3/lib/style.css'

Vue.use(ShadowUI)

# 按需引入

如果您只需要使用部分组件，可以按需引入

import Vue from 'vue'
import { Alert, Button, Card } from 'shadow-ui3'
import 'shadow-ui3/lib/style.css'

Vue.component('ui-alert', Alert)
Vue.component('ui-button', Button)
Vue.component('ui-card', Card)

# 基本使用

所有组件都可以通过以下方式使用

<template>
  <ui-component-name prop1="value1" prop2="value2" @event="handleEvent">
    <!-- 插槽内容 -->
  </ui-component-name>
</template>

<script setup>
const handleEvent = () => {
  // 事件处理逻辑
};
</script>

# Props 传

组件的属性可以通过以下方式传递：

<!-- 字符串-->
<ui-button type="primary">主要按钮</ui-button>

<!-- 动态-->
<ui-button :type="buttonType" :disabled="isDisabled">动态按/ui-button>

<!-- 布尔-->
<ui-switch v-model="switchValue"></ui-switch>

<!-- 对象和数-->
<ui-card :data="cardData" :tags="cardTags"></ui-card>

# 事件处理

组件的事件可以通过以下方式处理

<template>
  <ui-button @click="handleClick">点击按钮</ui-button>
  <ui-input @input="handleInput" @change="handleChange"></ui-input>
</template>

<script setup>
const handleClick = () => {
  console.log('按钮被点击了')
};

const handleInput = (value) => {
  console.log('输入值变化了:', value)
};

const handleChange = (value) => {
  console.log('输入值确认了:', value)
};
</script>

# 插槽使用

组件的插槽可以通过以下方式使用

<!-- 默认插槽 -->
<ui-card>
  <div>卡片内容</div>
</ui-card>

<!-- 具名插槽 -->
<ui-modal>
  <template v-slot:header>
    <h3>模态框标题</h3>
  </template>
  <template v-slot:body>
    <p>模态框内容</p>
  </template>
  <template v-slot:footer>
    <ui-button @click="closeModal">关闭</ui-button>
    <ui-button type="primary" @click="confirmModal">确认</ui-button>
  </template>
</ui-modal>

# 组件通信

# 父子组件通信

父子组件之间的通信主要通过 Props 和事件：

父组件通过 Props 向子组件传递数- 子组件通过事件向父组件传递消

<!-- 父组-->
<template>
  <ui-child :message="parentMessage" @reply="handleReply"></ui-child>
</template>

<script setup>
const parentMessage = '来自父组件的消息'

const handleReply = (message) => {
  console.log('收到子组件的回复:', message)
};
</script>

<!-- 子组-->
<template>
  <div>
    <p>{{ message }}</p>
    <ui-button @click="sendReply">回复父组/ui-button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  message: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['reply'])

const sendReply = () => {
  emit('reply', '来自子组件的回复')
};
</script>

# 兄弟组件通信

兄弟组件之间的通信可以通过以下方式实现

使用父组件作为中间件
使用 Vuex Pinia 等状态管理库
使用事件总线

# 主题定制

Shadow UI 支持主题定制，您可以通过 CSS 变量或主题配置来修改组件的外观和风格。具体定制方法请参主题定制

# 平台兼容

Shadow UI 支持多个平台，包括：

H5
微信小程- 支付宝小程序
百度小程- 字节跳动小程- QQ小程- APP

不同平台的兼容性可能有所差异，请查看各个组件文档中的平台兼容性说明

# 性能优化

为了提高应用的性能，建议您

按需引入组件，避免不必要的打包体2. 合理使用 v-if v-show，避免频繁的 DOM 操作
对于长列表，使用虚拟滚动或分页加4. 避免在模板中使用复杂的计算表达式
合理使用缓存，减少重复请

# 调试技

在使Shadow UI 组件时，如果遇到问题，可以尝试以下调试技巧：

查看浏览器控制台的错误信2. 检查组件的 Props 是否传递正3. 检查组件的事件是否正确绑定
使用 Vue DevTools 调试组件的状态和属5. 查看组件的文档和示例代码

# 常见问题

# 组件样式不生

请确保您已经正确引入了组件库的样式文件：

import 'shadow-ui3/lib/style.css'

# 组件无法正常渲染

请检查：

组件是否已经正确引入和注2. 组件Props 是否传递正3. 组件的插槽是否正确使4. 是否存在语法错误或运行时错误

# 组件事件不触

请检查：

事件名称是否正确
事件绑定是否正确
组件是否处于禁用状4. 是否存在阻止事件冒泡或默认行为的代码

如果您遇到了其他问题，可以查API 文档或提Issue (opens new window) 寻求帮助

← 组件列表注意事项 →