Vue 父子组件之间的数据传递：Props 和 $emit 方法

在 Vue 中，父子组件之间的数据传递可以通过 props 和 $emit 方法来实现。

父组件向子组件传值：

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

// Parent.vue
<template>
  <div>
    <Child :message='hello'></Child>
  </div>
</template>

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

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

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

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

在父组件中通过 v-bind 指令将数据传递给子组件，子组件通过 props 属性接收数据。

子组件向父组件传值：

在子组件中使用 $emit 方法触发一个自定义事件，父组件监听该事件并相应地处理数据。例如：

// Parent.vue
<template>
  <div>
    <Child @my-event='handleEvent'></Child>
    <div>Received message: {{ message }}</div>
  </div>
</template>

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

export default {
  data() {
    return {
      message: ''
    }
  },
  components: {
    Child
  },
  methods: {
    handleEvent(message) {
      this.message = message
    }
  }
}
</script>

// Child.vue
<template>
  <div>
    <button @click='sendMessage'>Send message to parent</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('my-event', 'Hello from child!')
      }
    }
  }
</script>

在子组件中通过 $emit 方法触发一个自定义事件，并传递数据给父组件，父组件通过监听该事件，在相应的方法中处理数据。