介绍
UniApp是一款基于Vue.js的跨平台开发框架，可以开发一套代码在多个平台上运行，包括小程序、H5、App等多个平台。在UniApp中，我们可以方便地创建和使用自定义组件，以提高代码复用性和开发效率。
自定义组件的创建和导入
在UniApp中，我们可以使用uni-app自带的标签<template>、<script>和<style>来创建一个自定义组件，并将其保存为一个.vue文件。
创建自定义组件
在UniApp的项目目录中，找到需要创建自定义组件的目录，一般为components目录。在该目录下新建一个.vue文件，作为我们的自定义组件。
<!-- MyComponent.vue -->
<template>
<view>
<text>{{ message }}</text>
</view>
</template>
<script>
export default {
data() {
return {
message: 'Hello World!'
}
}
}
</script>
<style scoped>
view {
padding: 10px;
background-color: #f0f0f0;
}
text {
color: #333;
font-size: 16px;
}
</style>
导入自定义组件
在需要使用自定义组件的页面，使用import语句导入该组件。
// MyPage.vue
<template>
<view>
<my-component></my-component>
</view>
</template>
<script>
import MyComponent from '@/components/MyComponent.vue'
export default {
components: {
MyComponent
}
}
</script>
自定义组件的使用和传参
自定义组件可以像原生组件一样在页面中使用，而且还可以传递参数给子组件。
使用自定义组件
在需要使用自定义组件的页面中，使用自定义组件的标签，并在components中注册该组件。
<!-- MyPage.vue -->
<template>
<view>
<my-component></my-component>
</view>
</template>
<script>
import MyComponent from '@/components/MyComponent.vue'
export default {
components: {
MyComponent
}
}
</script>
传递参数给子组件
在父组件中，可以通过给自定义组件的标签添加属性的方式，传递参数给子组件。子组件可以通过props接收父组件传递的参数。
<!-- MyPage.vue -->
<template>
<view>
<my-component :message="parentMessage"></my-component>
</view>
</template>
<script>
import MyComponent from '@/components/MyComponent.vue'
export default {
components: {
MyComponent
},
data() {
return {
parentMessage: 'Hello UniApp!'
}
}
}
</script>
<!-- MyComponent.vue -->
<script>
export default {
props: {
message: {
type: String,
default: ''
}
}
}
</script>
自定义组件的事件和插槽
自定义组件不仅可以接收参数，还可以触发事件和使用插槽。
触发自定义事件
在自定义组件中，可以使用this.$emit方法触发自定义事件，并携带参数传递给父组件。
<!-- MyComponent.vue -->
<template>
<view>
<button @click="handleClick">Click Me</button>
</view>
</template>
<script>
export default {
methods: {
handleClick() {
this.$emit('my-event', 'Custom Event')
}
}
}
</script>
使用插槽
在自定义组件中，可以使用<slot>标签定义一个或多个插槽，然后在父组件中使用该组件时，可以在标签内插入内容来填充插槽。
<!-- MyComponent.vue -->
<template>
<view>
<view class="header">
<slot name="header"></slot>
</view>
<view class="content">
<slot></slot>
</view>
</view>
</template>
<style scoped>
.header {
background-color: #f0f0f0;
padding: 10px;
font-size: 18px;
font-weight: bold;
}
.content {
padding: 10px;
}
</style>
<!-- MyPage.vue -->
<template>
<view>
<my-component>
<view slot="header">Header</view>
<view>Content</view>
</my-component>
</view>
</template>
<script>
import MyComponent from '@/components/MyComponent.vue'
export default {
components: {
MyComponent
}
}
</script>
总结
UniApp的自定义组件功能可以极大地提高代码复用性和开发效率。通过创建和使用自定义组件，可以将项目中重复的UI代码抽离出来，减少冗余，提高代码可维护性。同时，自定义组件还可以接收参数、触发事件和使用插槽，灵活满足不同需求。
希望本篇博客对你理解和使用UniApp自定义组件有所帮助。如有任何问题或建议，欢迎留言交流。
本文来自极简博客，作者：幽灵船长酱，转载请注明原文链接：UniApp自定义组件的使用
