Uniapp 是一个使用 Vue.js 开发跨平台应用的前端框架，组件封装和父子组件间通讯是其重要的特性之一。

一、组件封装

1. 为什么要封装组件

   • 提高代码的可维护性和可复用性。将特定功能封装成独立的组件，可以在不同的页面或项目中重复使用，减少代码重复。
   • 更好的代码组织。将复杂的页面拆分成多个小的组件，使得代码结构更加清晰，易于理解和维护。
   • 便于团队协作。不同的开发人员可以独立开发和维护不同的组件，提高开发效率。

2. 如何封装组件

   • 创建组件文件。在 Uniapp 项目中，可以在components目录下创建一个新的 Vue 文件来定义组件。
   • 定义组件的模板、脚本和样式。在组件文件中，可以使用 Vue 的语法来定义组件的模板、脚本和样式。
   • 注册组件。在需要使用组件的页面或父组件中，通过import导入组件，并在components选项中注册组件。

例如，创建一个名为my-component的组件：

<!-- my-component.vue -->
<template><div><h1>{{ title }}</h1><p>{{ content }}</p></div>
</template><script>
export default {name: "my-component",props: {title: String,content: String,},
};
</script><style scoped>
h1 {color: blue;
}
p {font-size: 14px;
}
</style>

在页面中使用该组件：

<!-- index.vue -->
<template><div><my-component title="Hello" content="World" /></div>
</template><script>
import myComponent from "@/components/my-component.vue";export default {components: {myComponent,},
};
</script>

二、父子组件间通讯

1. 父组件向子组件传递数据
   • 使用props属性。在子组件中定义props选项，接收父组件传递过来的数据。父组件在使用子组件时，可以通过属性绑定的方式将数据传递给子组件。

例如，父组件向子组件传递数据：

<!-- parent.vue -->
<template><div><child-component :message="parentMessage" /></div>
</template><script>
import childComponent from "@/components/child-component.vue";export default {components: {childComponent,},data() {return {parentMessage: "Hello from parent",};},
};
</script>

子组件接收数据：

<!-- child-component.vue -->
<template><div><p>{{ message }}</p></div>
</template><script>
export default {name: "child-component",props: {message: String,},
};
</script>

2. 子组件向父组件传递数据
   • 使用自定义事件。在子组件中，可以通过$emit方法触发自定义事件，并传递数据给父组件。父组件在使用子组件时，可以通过v-on指令监听子组件触发的事件，并接收数据。

例如，子组件向父组件传递数据：

<!-- child-component.vue -->
<template><div><button @click="sendMessage">Send Message</button></div>
</template><script>
export default {name: "child-component",methods: {sendMessage() {this.$emit("send-message", "Hello from child");},},
};
</script>

父组件接收数据：

<!-- parent.vue -->
<template><div><child-component @send-message="receiveMessage" /><p>{{ childMessage }}</p></div>
</template><script>
import childComponent from "@/components/child-component.vue";export default {components: {childComponent,},data() {return {childMessage: "",};},methods: {receiveMessage(message) {this.childMessage = message;},},
};
</script>

通过以上方式，可以实现 Uniapp 中的组件封装和父子组件间的通讯，提高代码的可维护性和可复用性。