vue3将文本发送到大屏

要将文本发送到大屏，您可以使用Vue.js 3中的Props和emit来实现。以下是一个简单的示例：

在大屏组件中，定义一个props接收文本数据：

<template>
  <div>
    <h1>{{ text }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    text: {
      type: String,
      required: true
    }
  }
}
</script>

在发送文本的组件中，使用emit将文本发送到大屏组件：

<template>
  <div>
    <input v-model="inputText" />
    <button @click="sendText">Send Text</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText: ''
    }
  },
  methods: {
    sendText() {
      this.$emit('text-updated', this.inputText)
    }
  }
}
</script>

在父组件中，将大屏组件和发送文本的组件组合在一起，并监听text-updated事件来更新大屏组件的文本：

<template>
  <div>
    <big-screen :text="displayText" />
    <send-text @text-updated="updateDisplayText" />
  </div>
</template>

<script>
import BigScreen from './BigScreen.vue'
import SendText from './SendText.vue'

export default {
  components: {
    BigScreen,
    SendText
  },
  data() {
    return {
      displayText: ''
    }
  },
  methods: {
    updateDisplayText(text) {
      this.displayText = text
    }
  }
}
</script>

这样就可以将文本发送到大屏并即时更新了。