vue子组件传给父组件的值如何显示在界面上

你可以在父组件中通过props接收子组件传递的值，然后在模板中使用即可显示在界面上。示例如下：

子组件代码：

<template>
  <button @click="sendProp">传递值</button>
</template>

<script>
export default {
  data() {
    return {
      msg: 'Hello World'
    }
  },
  methods: {
    sendProp() {
      this.$emit('get-msg', this.msg)
    }
  }
}
</script>

父组件代码：

<template>
  <div>
    <h1>父组件</h1>
    <child-component @get-msg="receiveMsg"></child-component>
    <h2>子组件传递的值为：{{ msg }}</h2>
  </div>
</template>

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

export default {
  components: {
    'child-component': ChildComponent
  },
  data() {
    return {
      msg: ''
    }
  },
  methods: {
    receiveMsg(value) {
      this.msg = value
    }
  }
}
</script>

这样子组件中的按钮点击事件会触发sendProp方法，通过this.$emit('get-msg', this.msg)将值传递给父组件。父组件中通过@get-msg监听传递的值，并在receiveMsg方法中接收，最终通过模板中的{{ msg }}显示在界面上。