在vue3中如何使用

在Vue 3中，使用组件的方式与Vue 2类似，但有一些关键的变化和新增特性。以下是使用Vue组件的一些基本步骤：

1. **创建组件**：首先，你需要在单独的文件中定义你的组件。例如，创建一个名为`MyComponent.vue`的文件：

   <script setup>
   import { ref } from 'vue';

   let message = ref('Hello World');
   </script>

   <template>
     <div>{{ message.value }}</div>
   </template>

或者使用ES6模块化:

   export default {
     props: ['msg'],
     setup(props) {
       const message = ref(props.msg || 'Hello World');
       return { message };
     }
   };

2. **导入并使用组件**：在另一个文件中，使用`import`导入组件，并在模板中引用它：

   <template>
     <MyComponent :msg="customMessage" />
   </template>

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

   // ...
   </script>

这里我们还展示了如何通过`props`向组件传递数据。

3. **组件通信**：Vue 3推荐使用`ref`和`reactive`（在Composition API中）来进行状态管理，而传统的`v-model`只适用于简单值绑定。父子组件间可以通过`$emit`和`$on`事件来通信。

4. **组件实例化**：在路由或组件树构建时，Vue会自动创建和管理组件实例。如果需要手动实例化，可以使用`createApp`函数：

const app = createApp(MyComponent);
app.mount('#root');