vue子组件和子组件通信

在 Vue 中，子组件和父组件之间的通信是通过 props 和事件来实现的。子组件通过 props 接收来自父组件的数据，而父组件则通过事件监听子组件的行为。

具体实现步骤如下：

1. 在父组件中使用子组件时，可以通过 props 属性传递数据：

<template>
  <child-component :message="parentMessage"></child-component>
</template>

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

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

2. 在子组件中，通过 props 接收来自父组件的数据：

<template>
  <div>{{ message }}</div>
</template>

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

这样，父组件就可以通过修改 `parentMessage` 的值来更新子组件的数据。

3. 如果子组件需要向父组件传递数据，可以通过自定义事件来实现：

<template>
  <button @click="sendData">Send Data</button>
</template>

<script>
  export default {
    methods: {
      sendData() {
        this.$emit('child-event', 'Data from child component')
      }
    }
  }
</script>

4. 在父组件中，监听子组件的事件并处理数据：

<template>
  <child-component @child-event="handleChildData"></child-component>
</template>

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

  export default {
    components: {
      ChildComponent
    },
    methods: {
      handleChildData(data) {
        console.log(data) // Output: "Data from child component"
      }
    }
  }
</script>

这样，子组件就可以通过 $emit 方法触发自定义事件，并把数据传递给父组件。