vue 父子组件通信过程?

Vue 的组件通信可以分为父子组件通信和兄弟组件通信。下面是 Vue 父子组件通信的过程：

1. 父组件通过 props 将数据传递给子组件。

2. 子组件通过 $emit 触发一个自定义事件，并传递数据给父组件。

3. 父组件监听子组件触发的自定义事件，并在自定义事件的回调函数中处理数据。

具体实现步骤如下：

1. 在父组件中定义一个数据属性，然后将这个数据属性通过 props 传递给子组件。

2. 子组件通过 props 接收父组件传递的数据。

3. 在子组件中定义一个方法，并通过 $emit 触发一个自定义事件，并将数据传递给父组件。

4. 在父组件中监听子组件触发的自定义事件，并在自定义事件的回调函数中处理数据。

例如：

// Parent.vue
<template>
  <div>
    <child :message="msg" @send="handleSend"></child>
  </div>
</template>
<script>
import Child from './Child.vue'
export default {
  components: {
    Child
  },
  data() {
    return {
      msg: 'Hello World!'
    }
  },
  methods: {
    handleSend(data) {
      console.log(data)
    }
  }
}
</script>

// Child.vue
<template>
  <div>
    {{ message }}
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
<script>
export default {
  props: ['message'],
  methods: {
    sendMessage() {
      this.$emit('send', 'Hello Parent!')
    }
  }
}
</script>

在上面的例子中，父组件通过 props 将数据属性 `msg` 传递给子组件，子组件接收到数据属性并显示。当子组件点击按钮时，会触发 `sendMessage` 方法，并通过 `$emit` 触发自定义事件 `send`，并将数据 `'Hello Parent!'` 传递给父组件。父组件监听自定义事件 `send`，并在回调函数中处理数据。