vue封装子组件和调用

在 Vue 中，封装子组件的方法有很多种。其中一种方法是使用 props 向父组件传递数据，另一种方法是使用自定义事件向父组件传递数据。下面是一个示例，展示了如何在子组件中将属性和方法暴露给父组件：

<!-- 子组件 ChildComponent.vue -->
<template>
  <div>
    <p>{{ message }}</p >
    <button @click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  props: ['message'],
  methods: {
    handleClick() {
      this.$emit('customEvent', 'Hello from ChildComponent');
    }
  }
}
</script>

<!-- 父组件 ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :message="message" @customEvent="handleCustomEvent" />
    <p>从子组件接收的消息： {{ receivedMessage }}</p >
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello from parent component'
    }
  },
  computed: {
    receivedMessage() {
      return this.message;
    }
  },
  methods: {
    handleCustomEvent(event) {
      this.receivedMessage = event;
    }
  }
}
</script>