父子组件相互传值

在 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 方法触发一个自定义事件，并传递数据给父组件，父组件通过监听该事件，在相应的方法中处理数据。