1. 程式人生 > >vue專案架構元件劃分和切換

vue專案架構元件劃分和切換

自學vue的童鞋是否跟我一樣遇到下列困惑

在小demo中 知道怎麼使用元件  及元件的切換  而在真正的專案中卻不知怎麼使用

首先 我們認識幾個重要的資料夾

main.js 管理vue的核心檔案 一般使用外掛都要在此引入

app.vue  入口檔案  相當於一個整個專案的父元件 

先說一下元件化的原因:

為了拆分vue例項程式碼裡的以不同的元件實現不同的功能

主要從ui介面上劃分 方便ui元件的重用

一:元件註冊

當我們註冊元件的時候,使用import  from 的方法 引入檔案 再進行元件註冊

1.在components資料夾新建一個vue檔案  作為一個子元件

2.在app.js中引入  

3.在app這個元件的js中註冊,註冊只要在components中寫上引入檔案的名字即可,原理是遵循node語法,再此不做解釋

4.在結構中使用 直接用<元件名></元件名>即可使用

二:元件切換  

切換元件有兩種方法:

1.使用 if else的方法

<login v-if="flag"></login>

<lansi v-else="flag"></lansi>

2.使用<component is="dataName" ></component>

在當前的data中  給這個欄位賦值 值為要展示的元件名 值型別一定是字串型別 

在methods中可以動態改變這個值  即動態切換元件