vue 父子组件通信

在Vue中，父子组件之间的通信可以通过props和自定义事件来实现。

1. 使用props传递数据：
父组件可以通过props属性将数据传递给子组件。子组件可以通过props接收父组件传递的数据，并在子组件中使用。

// 父组件
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: 'Hello from parent'
    };
  }
};
</script>

// 子组件
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: ['message']
};
</script>

2. 使用自定义事件：
子组件可以通过vm.$emit方法触发一个自定义事件，并将数据传递给父组件。父组件可以通过在子组件上监听自定义事件来接收子组件传递的数据，并在父组件中处理。

// 父组件
<template>
  <div>
    <child-component @custom-event="handleCustomEvent"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log(data); // 处理子组件传递的数据
    }
  }
};
</script>

// 子组件
<template>
  <div>
    <button @click="emitCustomEvent">点击触发自定义事件</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      this.$emit('custom-event', 'Hello from child'); // 触发自定义事件，并传递数据给父组件
    }
  }
};
</script>