当前位置：首页 > article >正文

uniapp组件封装和父子组件间通讯的介绍和详细案例

article 2024/11/14 8:08:34

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

一、组件封装

为什么要封装组件
- 提高代码的可维护性和可复用性。将特定功能封装成独立的组件，可以在不同的页面或项目中重复使用，减少代码重复。
- 更好的代码组织。将复杂的页面拆分成多个小的组件，使得代码结构更加清晰，易于理解和维护。
- 便于团队协作。不同的开发人员可以独立开发和维护不同的组件，提高开发效率。
如何封装组件
- 创建组件文件。在 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>

二、父子组件间通讯

父组件向子组件传递数据
- 使用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>

子组件向父组件传递数据
- 使用自定义事件。在子组件中，可以通过$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>