APP.vue引入子组件进行页面展示

一.将vue项目启动服务器原始页面进行清空

打开APP.vue文件，将<template>标签里的内容和<style>标签里的内容 ctrl+/ 选中进行注释，以及引入的Helloworld.vue文件内容代码进行注释

并且 ctrl+s 保存

 

服务器页面从原始页面

变为空白

二.在components文件夹下创建子组件，并在APP.vue文件中进行引入

并且将子组件放在APP.vue组件的<template>标签里

具体作用如下

1. 组件复用：通过在 App.vue 中使用 <MyComponent/>，你可以在父组件中复用这个子组件的功能和视图，而不需要重复编写相同的代码。

2. 界面构建：子组件 <MyComponent/> 可以包含独立的 UI 结构和逻辑，将其嵌入到 App.vue 中可以帮助你构建复杂的用户界面。它有助于将界面分解为更小的、可管理的部分。

3. 功能分离：通过将功能分离到子组件中，可以使每个组件更专注于它的具体任务，增强代码的模块化和可维护性。例如，<MyComponent/> 可能包含表单、按钮、图表或其他功能，而 App.vue 负责整体布局和结构。

4. 数据传递：子组件可以接收从父组件传递的 props，使得父子组件之间能够传递和共享数据。通过在 App.vue 中插入 <MyComponent/>，你可以将数据传递给这个子组件，并在子组件中进行展示或处理。

5. 响应式更新：当子组件中的数据或状态发生变化时，Vue 会自动更新视图。这样，将子组件嵌入到父组件中，可以利用 Vue 的响应式系统来动态更新页面内容。