vue--ajax

父组件

  1. 导入
    import axios from 'axios'

  2. mounted事件

    mounted () {
    this.getDetailInfo()
    }

  3. axios获得Json文件,然后触发方法

    methods: {
    getDetailInfo () {
    axios.get(‘api/detail.json’)
    }
    }

    获得动态路由的参数

    1. 在这里插入图片描述
      2. axios.get(‘api/detail.json?id=’ + this.route.params.id)![在这里插入图片描述](https://img−blog.csdnimg.cn/20190903194516885.png?x−oss−process=image/watermark,typeZmFuZ3poZW5naGVpdGk,shadow10,textaHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkYV9sYWtl,size16,colorFFFFFF,t70)3.axios.get(′api/detail.json?id=′+this.route.params.id )![在这里插入图片描述](https://img-blog.csdnimg.cn/20190903194516885.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkYV9sYWtl,size_16,color_FFFFFF,t_70) 3. axios.get('api/detail.json?id=' + this.route.params.id)![](https://imgblog.csdnimg.cn/20190903194516885.png?xossprocess=image/watermark,typeZmFuZ3poZW5naGVpdGk,shadow10,textaHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0FkYV9sYWtl,size16,colorFFFFFF,t70)3.axios.get(api/detail.json?id=+this.route.params.id) 等价于 在这里插入图片描述在这里插入图片描述
      在这里插入图片描述
  4. data初始化
    在这里插入图片描述

  5. 子组件属性调用
    在这里插入图片描述
    口诀
    一导二m三a法,四data初始五调用

子组件

  1. props 定义在这里插入图片描述
  2. 引用在这里插入图片描述
  3. 绑定直接变量名,插值记得加this
    口诀
    一定义二引用,绑定名字插值加this

keep-alive做缓存,mounted只会被执行一次。如果每次进页面都想发一个新的ajax请求。

  1. 配合使用activated 生命周期钩子
    2.
  2. keep-alive 标签处exclude 无需缓存的vue名
    在这里插入图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值