Vue3+Typescript+Ros2简单示例

<template>
  <div>
    <h1>{{ msg }}</h1>
    <button @click="sendMessage">Send Message</button>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  name: 'Ros2VueComponent',
  setup() {
    const msg = ref('Hello, ROS2!');
 
    function sendMessage() {
      // 假设有一个全局的ROS2实例和发布者
      // ROS2.Publisher.publish(msg.value);
      console.log(`Message sent: ${msg.value}`);
    }
 
    return { msg, sendMessage };
  }
});
</script>

这个简单的Vue组件使用Vue3和TypeScript，展示了如何在Vue组件中使用TypeScript。它包含了一个响应式的数据属性msg和一个方法sendMessage，用于模拟发送一个消息到ROS2系统。在实际应用中，你需要替换掉ROS2.Publisher.publish这部分代码，以实现与ROS2的通信。