在使用vue3绘制项目时有这么一种情况，我想在.vue文件里绘制一个页面，我不想在新建文件去定义组件，而是想在当前文件定义多个小组件，要求使用JSX语法，小组件中有自己的参数和方法之类的

npm install vue@next

<template>
  <div>
    <h1>My Page</h1>
    <MyComponent1 />
    <MyComponent2 />
  </div>
</template>

<script setup>
import { defineComponent } from 'vue';
import MyComponent1 from './MyComponent1';
import MyComponent2 from './MyComponent2';
</script>

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increaseCount">Increase Count</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello from MyComponent1',
      count: 0,
    };
  },
  methods: {
    increaseCount() {
      this.count++;
    },
  },
};
</script>

<template>
  <div>
    <p>{{ text }}</p>
    <button @click="changeText">Change Text</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'Initial Text',
    };
  },
  methods: {
    changeText() {
      this.text = 'New Text';
    },
  },
};
</script>

npm run serve