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中可以动态改变这个值 即动态切换组件