元件巢狀關係 Main.vue程式碼： Aside.vue程式碼： Article.vue程式碼： Item.vue程式碼：
利用元件結構完成巢狀
建立以下vue
將Header.vue Main.vue Aside.vue 引入 App.vue中
Article.vue引入Main.vue，Item.vue引入Aside.vue中
Header.vue程式碼：
Header
</template>
<script>
</script>
<style scoped>
.header{
width: 100%;
height: 100px;
border: 5px solid #999;
text-align: center;
line-height: 100px;
box-sizing: border-box;
}
</style>
Main
</template>
<script>
import Article from './Article.vue';
export default {
components:{
Article
}
}
</script>
<style>
.main{
width: 70%;
height: 600px;
border: 5px solid #999;
line-height: 100px;
box-sizing: border-box;
float: left;
}
</style>
Aside
</template>
<script>
import Item from './Item.vue'
export default {
components:{
Item
}
}
</script>
<style>
.aside{
width: 30%;
height: 600px;
border: 5px solid #999;
line-height: 100px;
box-sizing: border-box;
float: right;
}
</style>
<h3>Article</h3>
</template>
<script>
</script>
<style>
h3{
width: 80%;
margin: 0 auto;
text-align: center;
line-height: 100px;
box-sizing: border-box;
margin-top: 10px;
background-color: aqua;
}
</style>
Item
vue的元件巢狀關係
相關文章
- vue巢狀元件傳參Vue巢狀元件
- vue元件巢狀之 - 父元件向子元件傳值Vue元件巢狀
- 021.Vue3入門，元件巢狀關係，顯示一個經典的佈局樣式Vue元件巢狀
- vue任意關係元件通訊與跨元件監聽狀態 vue-communicationVue元件
- vue路由巢狀Vue路由巢狀
- Vue案例引發的「巢狀元件」通訊的簡單方式Vue巢狀元件
- vue（19）巢狀路由Vue巢狀路由
- vue-router 巢狀路由Vue巢狀路由
- 關於 MySQL 的巢狀事務MySql巢狀
- Vue之動態路由、巢狀路由Vue路由巢狀
- 3 vite vue-router 路由巢狀ViteVue路由巢狀
- vue父子關係元件間的雙向資料繫結Vue元件
- vue使用keep-alive實現多元件巢狀中個別元件存活不銷燬VueKeep-Alive元件巢狀
- oracle 雜湊查詢與巢狀查詢跟表的先後關係測試Oracle巢狀
- 集合的巢狀巢狀
- 盒子的巢狀巢狀
- $attrs 與 $listeners 進行「巢狀元件」通訊巢狀元件
- 關於MySQL遊標的巢狀使用MySql巢狀
- 關係重疊？實體巢狀？曝光偏差？這個模型統統都搞得定！巢狀模型
- vue elementUI 表單校驗（多層巢狀）VueUI巢狀
- 【原創】WEB元件的關聯關係Web元件
- 集合框架-集合的巢狀遍歷（HashMap巢狀HashMap）框架巢狀HashMap
- 集合框架-集合的巢狀遍歷（HashMap巢狀ArrayList）框架巢狀HashMap
- 集合框架-集合的巢狀遍歷（ArrayList巢狀HashMap）框架巢狀HashMap
- 集合框架-集合的巢狀遍歷（多層巢狀）框架巢狀
- 行為和狀態的關係
- 巢狀關聯會查詢兩次巢狀
- iterate的巢狀使用巢狀
- vue 基礎入門筆記 18:路由巢狀Vue筆記路由巢狀
- 4、vue-router之什麼是巢狀路由Vue巢狀路由
- less巢狀巢狀
- Datalist巢狀巢狀
- Solr主要元件關係圖Solr元件
- 漫談 React 元件庫開發（一）：多層巢狀彈層元件React元件巢狀
- vue父子元件狀態同步的最佳方式Vue元件
- vue筆記-6 vue中router路由 路由引數的傳遞 巢狀路由Vue筆記路由巢狀
- 關於 Go Modules 巢狀引入本地包的問題Go巢狀
- 遞迴元件組合拳，無懼頁面巢狀遞迴元件巢狀