子组件和父组件如何关联

在Vue中，父子组件的关系可以通过prop和事件来实现通信。父组件可以通过prop向子组件传递数据，子组件可以通过事件向父组件发送消息。具体实现步骤如下：

1. 父组件向子组件传递数据，可以在父组件中使用子组件的标签，并通过属性绑定的方式将数据传递给子组件。例如：

<template>
  <div>
    <child-component :prop-name="data"></child-component>
  </div>
</template>

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

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

在子组件中，可以通过props选项来声明接收父组件传递的数据。例如：

<template>
  <div>{{ propName }}</div>
</template>

<script>
export default {
  props: {
    propName: String
 }
}
</script>

2. 子组件向父组件发送消息，可以在子组件中使用$emit方法触发一个自定义事件，并将需要传递的数据作为参数传递给父组件。例如：

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

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

在父组件中，可以通过v-on指令监听子组件触发的自定义事件，并在事件处理函数中获取子组件传递的数据。例如：

<template>
  <div>
    <child-component @custom-event="handleMessage"></child-component>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleMessage(data) {
      console.log(data) // 输出：Hello World
    }
  }
}
</script>