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

八股文_UniApp面试题 0 47

参考回答：

在 UniApp 中，组件是构建应用界面的重要单位，可以帮助我们封装和复用 UI 和逻辑。组件的创建、使用和传参方式如下：

组件的创建：

创建页面级组件：
页面级组件通常是通过 .vue 文件来创建，它包含了页面的模板、逻辑和样式。

示例：/pages/components/MyComponent.vue：

<template>
 <view>
   <text>{{ message }}</text>
 </view>
</template>

<script>
export default {
 data() {
   return {
     message: 'Hello from MyComponent'
   };
 }
}
</script>

<style scoped>
text {
 font-size: 20px;
 color: red;
}
</style>

创建自定义组件：
自定义组件是独立于页面的 .vue 文件，可以用于其他页面或组件中。组件可以接收父组件传递的数据（通过 props）以及触发事件与父组件进行交互。
- 示例：/components/MyComponent.vue：
```
<template>
 <view>
   <text>{{ text }}</text>
 </view>
</template>

<script>
export default {
 props: {
   text: {
     type: String,
     default: 'Default text'
   }
 }
}
</script>

<style scoped>
text {
 font-size: 18px;
 color: blue;
}
</style>
```

组件的使用：

在父页面或父组件中引入子组件并使用，使用时通过 import 引入组件，并在 components 中注册。

示例：在 pages/home/home.vue 中使用 MyComponent：

<template>
<view>
 <my-component text="This is passed from parent"></my-component>
</view>
</template>

<script>
import MyComponent from '@/components/MyComponent.vue';

export default {
components: {
 MyComponent
}
};
</script>

<style>
/* 样式 */
</style>

组件的传参方式：
- 通过 props 传递数据：
  父组件可以通过 props 向子组件传递数据，子组件通过 props 接收并使用这些数据。
  - 父组件：
```
<my-component :text="parentText"></my-component>
```
  - 子组件：
```
props: {
text: {
type: String,
default: '默认值'
}
}
```

通过 events（自定义事件）与父组件通信：
子组件可以通过 $emit 触发事件，将数据传递给父组件，父组件通过 v-on 监听这些事件并处理数据。
- 子组件：
```
this.$emit('customEvent', 'Hello Parent!');
```
- 父组件：
```
<my-component @customEvent="handleEvent"></my-component>
```
- 父组件中的 handleEvent 方法：
```
methods: {
 handleEvent(data) {
   console.log('Received from child: ', data);
 }
}
```

通过 ref 获取子组件的实例：
ref 是用于引用子组件或 DOM 元素的一种方式，父组件可以通过 ref 获取子组件实例并调用其方法或访问数据。

父组件：

<my-component ref="childComponent"></my-component>
<button @click="callChildMethod">Call Child Method</button>

父组件中的方法：

methods: {
callChildMethod() {
 this.$refs.childComponent.someMethod();
}
}

子组件：

methods: {
 someMethod() {
   console.log('Method in child component called!');
 }
}

详细讲解与拓展：

组件的创建：
- UniApp 组件使用 .vue 文件进行创建，这与 Vue.js 非常相似，主要包含三部分内容：模板 (template)、脚本 (script)、样式 (style)。
- 组件分为 页面组件 和 非页面自定义组件，其中页面组件是用于渲染整个页面的，而自定义组件则主要用于封装可复用的 UI 和功能。
组件的使用：
- 在 UniApp 中，页面组件使用与 Vue.js 相同的方式来导入和注册自定义组件。每个组件在使用前必须在父组件中进行注册，才能在模板中正常使用。
- 使用组件时，可以向组件传递数据，也可以通过事件实现与父组件的双向通信。
组件的传参方式：
- props：通过 props 向子组件传递数据是最常见的方式，适用于父子组件之间的单向数据流。子组件可以接收这些 props 数据并在模板中渲染或在逻辑中使用。
- events：父组件通过 v-on 监听子组件触发的事件，子组件通过 this.$emit 触发这些事件并传递数据。事件用于父子组件之间的交互，尤其适合处理用户输入、状态更新等行为。
- ref：通过 ref 获取子组件实例可以让父组件直接调用子组件中的方法或访问其数据，这对于需要与子组件进行更复杂交互的场景非常有用。

举个例子：

假设你有一个表单组件，父组件需要将用户输入的数据传递给表单组件并在提交时获取表单的数据。

父组件：

<template>
  <view>
    <form-component :userInfo="userData" @submit="handleSubmit"></form-component>
  </view>
</template>

<script>
import FormComponent from '@/components/FormComponent.vue';

export default {
  components: {
    FormComponent
  },
  data() {
    return {
      userData: {
        name: 'John Doe',
        email: 'john@example.com'
      }
    };
  },
  methods: {
    handleSubmit(data) {
      console.log('Form submitted:', data);
    }
  }
};
</script>

子组件（表单）：

<template>
  <view>
    <input v-model="name" :value="userInfo.name" />
    <input v-model="email" :value="userInfo.email" />
    <button @click="submitForm">Submit</button>
  </view>
</template>

<script>
export default {
  props: {
    userInfo: Object
  },
  data() {
    return {
      name: '',
      email: ''
    };
  },
  methods: {
    submitForm() {
      this.$emit('submit', { name: this.name, email: this.email });
    }
  }
};
</script>

总结：UniApp 中的组件可以通过 props、events 和 ref 来实现数据传递和交互。组件的创建和使用类似于 Vue.js，具有高度的灵活性和可复用性。掌握组件的创建和传值方式能帮助开发者在项目中更加高效地组织和管理代码。

参考回答：

详细讲解与拓展：

举个例子：

发表评论 取消回复

发表评论取消回复