vue專案架構元件劃分和切換
阿新 • • 發佈:2018-12-11
自學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中可以動態改變這個值 即動態切換元件