简述Uniapp 中组件的创建以及使用和传参方式？

UniApp面试题 8月前 0 115

在 uni-app 中，组件是复用和组织 Vue 应用的基本单位。创建、使用和传参给组件的过程遵循 Vue.js 的标准模式，但同时也融入了 uni-app 的特色。下面是关于如何在 uni-app 中创建组件、使用组件以及组件间的传参方式的简述。

创建组件

定义组件：在 components 目录下创建一个新的 Vue 文件，如 MyComponent.vue，并定义你的组件：

<!-- MyComponent.vue -->
<template>
 <view>
   <text>我是一个组件</text>
 </view>
</template>

<script>
export default {
 data() {
   return {
     // 组件的数据
   };
 },
 methods: {
   // 组件的方法
 }
};
</script>

<style scoped>
/* 组件的样式 */
</style>

使用组件

导入组件：在使用组件的页面或其他组件中，首先需要导入你创建的组件：
```
// 引入 MyComponent 组件
import MyComponent from '@/components/MyComponent.vue';
```
注册组件：然后，需要在导入组件的页面或父组件中注册这个组件：
```
export default {
 components: {
   MyComponent
 }
};
```
在模板中使用：注册完成后，就可以在模板中使用这个组件了：
```
<template>
 <view>
   <my-component></my-component>
 </view>
</template>
```

组件传参

在 uni-app 中，组件间的传参主要通过 props 实现。

定义 props：在子组件中，定义需要接收的 props：

export default {
 props: {
   msg: String // 定义一个名为 msg 的 prop
 }
};

父组件传递参数：在父组件中，通过绑定属性的方式向子组件传递参数：
```
<my-component :msg="message"></my-component>
```
这里 message 是父组件中的数据，它的值将被传递给子组件的 msg prop。

监听子组件事件

组件间的通信不仅限于父组件向子组件传递数据，子组件也可以向父组件发送消息。

子组件触发事件：子组件可以使用 $emit 方法触发一个事件，并传递数据给父组件：
```
this.$emit('customEvent', someData);
```
父组件监听事件：父组件通过在子组件标签上使用 v-on（或简写为 @）来监听这个事件：
```
<my-component @customEvent="handleCustomEvent"></my-component>
```
当子组件触发 customEvent 事件时，父组件的 handleCustomEvent 方法会被调用，并接收到从子组件传递过来的数据。

通过上述步骤，你可以在 uni-app 中灵活地创建、使用组件，并实现组件间的数据传递和通信。