Vue动态组件、组件传值、keep-alive、scoped、axios、响应结构

components文件夹下

四个文件夹 各自一个index.vue  和tabbar.vue



app.vue是根组件 由他切换 这四个页面

flexble.js：适配dpr ios ， vw同功能

main.js

1.引入flexble.js 需要在index.html中把meta标签删掉 erem相当于fontsize

移动端element 设计稿375：需要*2/fontsize

app.vue中

引入四个文件夹 中的四个index页面 将标签放在html中

和tabBar   添加函数 tabBar的点击事件函数 （switch）

只展示出来一个页面，如何实现：

app.vue：

```vue
 data(){
       return {
           page:"Home"
       }
   }
```

app.vue中借条件 <Home v-if="page=='home'"></Home>

tabBar共有不用条件：<TabBar @handleToggle="handleTogglePage"></TabBar> 

记得注册  ：

```vue
export default {
   name:"App",
   components:{
       Home,
       List,
       Order,
       Mine,
       TabBar
   }
}
```

 在tabBar添加点击事件

```vue
<template>
    <div id="footer">
        <ul>
            <li v-for="(item,index) in navs" :key="index" @click="handleClick(index)">{{item.text}}</li>
        </ul>
    </div>
</template>
```

```
  methods:{
        handleClick(index){
            this.$emit("handleToggle",index)
        }
    }
```



tabBar.vue中

```vue
data(){
        return {
            navs:[
                {
                    text:"首页"
                },
                 {
                    text:"列表"
                },
                 {
                    text:"订单"
                },
                 {
                    text:"我的"
                }
            ]
        }
    }
```



在html中遍历数组的下标 增加点击事件

```vue
<li v-for="(item,index) in navs " @click="handleClick(index)">{{item.text}}</li>
```



#### 动态组件：当前组件切换不涉及到路由

通过动态切换is属性来显示不同的页面

```
<component is =""></component>

```



解释：is属性值是哪个组件名称就是哪个组件 绑定page（点击哪个就是哪个 ） 即可以动态使用   但是真正不用再项目（路由）里 场景 ：类似选项卡 或者商品列表

测试： 走不走生命周期 （四个页面）=>第二次选择同一页面时还会重走一次生命周期 为了避免 引出keep-alive

###### keep-alive：Vue中的内部组件

凡是被keep-alive包裹的组件第一次创建后就会保存在内存当中 不会经历销毁下次进行页面切换时会从缓存中读取

```javascript
<keep-alive><component is =""></component></keep-alive>
```

场景：猫眼电影 

当前组件里面数据是实时更新的

keep-alive属性

1. include 包含哪几个  正则 字符串

2.  exclude除了那几个    正则 字符串

3. max 最多存储几个组件 （一般不用 ）

      只要被keep-alive包裹的组件会增两个生命周期 （activated   和 deactivated：进入缓存状态  即在点击时只走这两个声明周期 ： 作用是 例如看小说 deactivated记住章节位置activated 时活跃状态回到之前章节     可以在activated 时进行ajax情求）

   场景：

   数据筛选 滚动条位置 信息填写 （身份证号去其他页面看后再回来）

   

   

   

   问题：1.给每个页面加html  中class=“page 页面名”

   2.不同css 结果：同一个css 因为class名相同 后者覆盖前者

   解决：在style标签加scoped

   scoped：让每个组件的样式私有化 简单来说让每个组件类名唯一化（公共页面不需要）

   

   

   

   

   面试题：

   1.单向数据流：

    当父组件给子组件传递数据的时候，子组件只允许进行数据的读，而不允许做数据的改。因为当子组件改变父组件传递过来的数据的话会造成数据流难以理解。

   

   index.vue home页面中演示

   只要是prop 一定是下行板顶 

    ！警告：父组件的内容子组件不可以修改    应用数据流难以理解（官方）

   改变了数据出现问题 不知道属于父组件还是子组件

   解决：修改自己  

    data（）{}

   watch：（）

   

   2.

   组件data为何是函数：

   因为对象是引用数据类型 如果data是对象的情况下会造成所有组件公用一个data

   而当data是一个函数情况下每次函数执行完毕后会返回一个新的对象 这样每个组件会维护一个独立的对象（data）

   

   

   

   vue 用什么做数据情求

   思路：ajax（缺点：1.原生需要封装2.jq中会出现回调）

   异步处理方案（4） 回调 promise generator 

   async await（最好）

   

   解决：

   axios（官网）

   ：基于promise的http库 可以在浏览器和node环境中使用 

   特点：1.支持promise的api 

   2.可以在浏览器环境中创建xmlhttpRequest进行数据情求

   3、可以在node环境中通过http进行数据请求

    4、请求、响应数据的拦截

    5、请求、响应数据的转换

   安装：

   ```
cnpm install axios -S
   yarn add axios
```
   

   
get请求 （区别：有params post没有直接请求）
   
  axios.get(url,{
   
​                    params:{
   
​                        get请求需要传递的参数
   
​                    }
   
​                }).then((data)=>{
   
​                    console.log(data)
   
​                })
   

   
​            post请求
   
​                axios.post(url,{
   
​                    post请求需要传递的参数
   
​                }).then((data)=>{
   
​                    console.log(data)
   
​                })
   

   
​            综合写法
   
​                axios({
   
​                    method:"请求的方式",
   
​                    data:"post请求提交的参数"，
   
​                    headers:"请求头"
   
​                    url:"请求的地址"
   
​                }).then((data)=>{
   
​                    console.log(data);
   
​                })
   

   

   

   

   
下载postman
   
axios配置项：
   
localhost地址是开发环境地址
   
http:      
   
设置时变 http:// 生产环境
   
process.env. 环境变量
   
headers :application
   
params:get
   
data
   
:只针对post     拦截器
   
timeout：设置超时
   
withCredemtials： 在token里用  设置跨域访问cookie （凭证）默认是false 需要设置成true 
   
默认数据类型是json
   
常用配置项：url baseUrl params methodheader data timeout withCredemtials
   

   
axios封装 拦截器 响应体
   
作业 安装 跨域代理 web.json 中
   
devServer：{
   
target：代理地址
   
changeOrigin：true}
   
在app.vue的created情求 get地址 .then data
   
看data有个对象 是响应体