Vue父子组建之间通信

Vue 的父子组件之间通信可以通过 props 和 emit 两种方式实现。

1. props

父组件通过 props 将数据传递给子组件，子组件通过 this.$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>
    {{ message }}
  </div>
</template>
<script>
export default {
  props: {
    message: String
  }
}
</script>

2. emit

子组件通过 emit 事件向父组件传递数据，父组件通过监听子组件的事件来接收数据。

子组件触发事件示例：

<template>
  <div>
    <button @click="sendMessage">Send message to parent</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('send-message', 'Hello from child');
    }
  }
}
</script>

父组件接收事件示例：

<template>
  <div>
    <child-component @send-message="receiveMessage"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveMessage(message) {
      console.log(message); // 输出：Hello from child
    }
  }
}
</script>

以上就是 Vue 父子组件之间通信的两种方式。需要注意的是，修改 props 中的数据是不被允许的，因为它们被认为是单向数据流。如果需要在子组件中修改父组件中的数据，可以使用 $emit 向父组件发送事件。