元件巢狀關係 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
</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>
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巢狀
- 遞迴元件組合拳,無懼頁面巢狀遞迴元件巢狀