vue父子组件通信

父组件向子组件传递数据的示例代码如下：

// Parent.vue
<template>
  <div>
    <Child :message="parentMessage" />
  </div>
</template>

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

export default {
  components: {
    Child
  },
  data() {
    return {
      parentMessage: '我是来自父组件的内容'
    }
  }
}
</script>

子组件接收父组件传递数据的示例代码如下：

// Child.vue
<template>
  <div>{{ message }}</div>
</template>

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

在父组件中，我们使用子组件时通过使用冒号（:）绑定传递了一个名为 message 的属性，该属性的值是 parentMessage，即父组件中定义的数据。子组件需要使用 props 来声明它所期望接收的属性，这个 message 属性必须是一个字符串类型，并且是必需属性，在子组件内部我们将使用这个属性来渲染模板。通过这种方式，父子组件之间就可以传递数据了。