页面层级
# 1. main.ts 引入 App.文件
import { createApp } from 'vue'
import './style.css'
import App from './简答组件的使用/App.vue'createApp(App).mount('#app')#2. 定义 Footer.vue
<script setup lang="ts">
</script><template><div>这是底部组件</div>
</template>
<style scoped></style>#3. 定义Header.vue
<script setup lang="ts">
</script><template><div>这是头部</div>
</template><style scoped></style># 4. 定义Content里的两个子组件
---------------------------------------------------------
ContentList.vue<script setup lang="ts">
</script><template><div><ul><li>1</li><li>2</li><li>3</li><li>4</li></ul></div>
</template><style scoped>
</style>-----------------------------------------------------
ContentTitle.vue<script setup lang="ts">
let title = '简答组件的使用'
</script><template><h1>{{title}}</h1>
</template><style scoped></style># 5. 定义Content.vue
<script >
import ContentList from './components/ContentList.vue'
import ContentTitle from './components/ContentTitle.vue'
export default {components: {ContentList,ContentTitle}
}
</script><template><div>// 调用内容的子组件<content-title></content-title><content-list></content-list></div>
</template><style scoped></style># 6. App.vue 调用组装
// 调用 头,内容,底部 组件
<script >
// 引入自定的组件
import ContentList from './components/ContentList.vue'
import ContentTitle from './components/ContentTitle.vue'
export default {components: {ContentList,ContentTitle}
}
</script><template><div><content-title></content-title><content-list></content-list></div>
</template><style scoped></style># 7. 运行
npm run dev# 8.访问
