元件巢狀關係 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的元件巢狀關係
相關文章
- 008. vue元件的巢狀Vue元件巢狀
- vue巢狀元件傳參Vue巢狀元件
- 021.Vue3入門，元件巢狀關係，顯示一個經典的佈局樣式Vue元件巢狀
- vue元件巢狀之 - 父元件向子元件傳值Vue元件巢狀
- vue任意關係元件通訊與跨元件監聽狀態 vue-communicationVue元件
- vue路由巢狀Vue路由巢狀
- Vue中的巢狀路由Vue巢狀路由
- Vue案例引發的「巢狀元件」通訊的簡單方式Vue巢狀元件
- vue（19）巢狀路由Vue巢狀路由
- vue-router 巢狀路由Vue巢狀路由
- 關於 MySQL 的巢狀事務MySql巢狀
- vue使用keep-alive實現多元件巢狀中個別元件存活不銷燬VueKeep-Alive元件巢狀
- vue父子關係元件間的雙向資料繫結Vue元件
- 3 vite vue-router 路由巢狀ViteVue路由巢狀
- 關係重疊？實體巢狀？曝光偏差？這個模型統統都搞得定！巢狀模型
- $attrs 與 $listeners 進行「巢狀元件」通訊巢狀元件
- vue elementUI 表單校驗（多層巢狀）VueUI巢狀
- 巢狀關聯會查詢兩次巢狀
- 關於 Go Modules 巢狀引入本地包的問題Go巢狀
- vue 基礎入門筆記 18:路由巢狀Vue筆記路由巢狀
- 4、vue-router之什麼是巢狀路由Vue巢狀路由
- 遞迴元件組合拳，無懼頁面巢狀遞迴元件巢狀
- vue筆記-6 vue中router路由 路由引數的傳遞 巢狀路由Vue筆記路由巢狀
- vue父子元件狀態同步的最佳方式Vue元件
- html的巢狀規則HTML巢狀
- 列表巢狀操作巢狀
- vue相關的UI元件庫VueUI元件
- spring cloud alibaba 元件版本關係 以及 畢業版本依賴關係SpringCloud元件
- 微信小程式如何阻止多層巢狀元件的點選事件冒泡微信小程式巢狀元件事件
- JavaScript中if巢狀assert的方法JavaScript巢狀
- golang的巢狀事務管理Golang巢狀
- WPF 控制元件類派生關係控制元件
- spring-cloud-alibaba 元件版本關係SpringCloud元件
- 利用Layer元件彈出多個對話方塊（非巢狀）與關閉及重新整理元件巢狀
- mock axios vue的資料傳遞關係MockiOSVue
- ScrollView巢狀RecyclerView滑動衝突相關問題View巢狀
- RXJS元件間超越父子關係的相互通訊JS元件
- 巢狀類遞迴巢狀遞迴