vue子组件如何给父组件传一个值然后在父组件上显示

可以使用 props 将子组件的数据传递给父组件。在子组件中，需要将需要传递的数据作为一个属性绑定到组件的标签上，例如：

<template>
  <div>
    <button @click="handleClick">点击传递数据</button>
  </div>
</template>

<script>
  export default {
    methods: {
      handleClick() {
        // 将数据作为事件参数传递给父组件
        this.$emit('receiveData', 'hello world');
      }
    }
  }
</script>

在父组件中，可以通过监听子组件触发的事件来获取传递的数据：

<template>
  <div>
    <child-component @receiveData="handleReceiveData"></child-component>
    <p v-if="data">{{data}}</p>
  </div>
</template>

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

  export default {
    components: {
      ChildComponent
    },
    data() {
      return {
        data: null // 父组件中要显示的子组件传递的数据
      }
    },
    methods: {
      handleReceiveData(data) {
        // 监听子组件的事件，获取传递的数据
        this.data = data;
      }
    }
  }
</script>

上面的代码中，子组件中定义了 handleClick 方法，当点击按钮时，会通过 $emit 方法触发子组件的 receiveData 事件，并将数据作为参数传递给父组件。在父组件中，通过监听子组件触发的 receiveData 事件，获取传递的数据，然后在页面上显示出来。