vue 组件通讯 props使用

Vue组件通讯可以使用props来实现。props是父组件向子组件传递数据的一种方式。在父组件中使用子组件时，可以通过在子组件标签上绑定属性的方式来传递数据。子组件中通过props选项来声明需要接收的属性，然后就可以在子组件中使用这些属性了。当父组件中的数据发生变化时，子组件中的数据也会随之变化。

例如，父组件中有一个数据message，我们想要将这个数据传递给子组件，可以这样写：

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</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: String
  }
}
</script>

这样，当父组件中的message数据发生变化时，子组件中的message数据也会随之变化。