如何创建将用户输入发送到另一个组件的vue模式

<template>
  <input v-model="userInput" type="text" />
  <button @click="sendInput">发送</button>
</template>

<script>
export default {
  data() {
    return {
      userInput: ''
    };
  },
  methods: {
    sendInput() {
      this.$emit('input-sent', this.userInput);
    }
  }
};
</script>

<template>
  <div>
    <p>接收到的用户输入：{{ receivedInput }}</p>
  </div>
</template>

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

<template>
  <div>
    <send-component @input-sent="handleInput"></send-component>
    <receive-component :received-input="userInput"></receive-component>
  </div>
</template>

<script>
import SendComponent from './SendComponent.vue';
import ReceiveComponent from './ReceiveComponent.vue';

export default {
  components: {
    SendComponent,
    ReceiveComponent
  },
  data() {
    return {
      userInput: ''
    };
  },
  methods: {
    handleInput(input) {
      this.userInput = input;
    }
  }
};
</script>