在 Vue 中，组件之间的值传递可以通过 props 属性和自定义事件来实现。以下是一个简单的演示，演示了如何在父组件中传递数据给子组件，并在子组件中调用父组件的方法。

1. 创建父组件（Parent.vue）

<template>
  <div>
    <h2>父组件</h2>
    <p>父组件的数据：{{ parentData }}</p>

    <!-- 使用子组件，并通过 props 传递数据 -->
    <ChildComponent :childProp="parentData" @childEvent="handleChildEvent" />

    <p v-if="messageFromChild">子组件传递的消息：{{ messageFromChild }}</p>
  </div>
</template>

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

export default {
  data() {
    return {
      parentData: 'Hello from parent!',
      messageFromChild: '',
    };
  },
  components: {
    ChildComponent,
  },
  methods: {
    handleChildEvent(message) {
      // 子组件触发的事件，更新父组件的数据
      this.messageFromChild = message;
    },
  },
};
</script>

2. 创建子组件（ChildComponent.vue）

<template>
  <div>
    <h2>子组件</h2>
    <p>子组件接收的数据：{{ childProp }}</p>

    <!-- 子组件中的按钮，点击时触发自定义事件 -->
    <button @click="sendEventToParent">触发事件给父组件</button>
  </div>
</template>

<script>
export default {
  props: {
    // 接收父组件传递的数据
    childProp: String,
  },
  methods: {
    sendEventToParent() {
      // 子组件向父组件发送自定义事件，并携带消息
      this.$emit('childEvent', 'Hello from child!');
    },
  },
};
</script>

在这个示例中，父组件（Parent.vue）通过 props 将数据传递给子组件（ChildComponent.vue）。子组件可以通过 $emit 方法触发一个自定义事件，并将消息传递给父组件。在父组件中，通过监听这个事件，可以调用相应的方法来处理子组件传递的消息。