008. vue组件的嵌套

页面层级

# 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.访问
![image](/i/l/?n=24&i=blog/3491031/202410/3491031-20241013125501552-1198395080.png)