vue中父子组件传递信息实现

Vue中父子组件之间传递信息可以通过props和$emit事件来实现。

1. 父组件向子组件传递信息：

在父组件中通过props将数据传递给子组件，子组件通过props接收数据即可。

父组件：

<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello, child component!'
    }
  }
}
</script>

子组件：

<template>
  <div>
    {{ message }}
  </div>
</template>
<script>
export default {
  props: {
    message: String
  }
}
</script>

2. 子组件向父组件传递信息：

在子组件中通过$emit事件触发父组件的方法，将需要传递的数据作为参数传递即可。

子组件：

<template>
  <div>
    <button @click="sendMessage">Send message to parent</button>
  </div>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('send-message', 'Hello, parent component!')
    }
  }
}
</script>

父组件：

<template>
  <div>
    <child-component @send-message="receiveMessage"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue'

export default {
  components: {
    ChildComponent
  },
  methods: {
    receiveMessage(message) {
      console.log(message)
    }
  }
}
</script>

在子组件中通过$emit触发了send-message事件，父组件通过@send-message监听到事件，并且将传递的数据作为参数传递给了receiveMessage方法。