vue props组件通信

在Vue中，父组件可以通过props向子组件传递数据，子组件可以通过事件向父组件传递数据。

1. 父组件向子组件传递数据

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

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

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

export default {
  components: { ChildComponent },
  data() {
    return {
      message: 'Hello World!'
    }
  }
}
</script>

在子组件中可以通过props接收并使用父组件传递的数据，例如：

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

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
}
</script>

2. 子组件向父组件传递数据

在子组件中可以通过$emit方法触发一个自定义事件，并传递数据，例如：

<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message', 'Hello World!')
    }
  }
}
</script>

在父组件中可以通过v-on指令监听子组件触发的自定义事件，并接收数据，例如：

<template>
  <child-component @message="handleMessage"></child-component>
</template>

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

export default {
  components: { ChildComponent },
  methods: {
    handleMessage(message) {
      console.log(message) // 'Hello World!'
    }
  }
}
</script>