vue，vant父子组件传值props

vue官网props

父组件向子组件传递值
父组件：通过属性的形式进行传递（比如v-bind:content=“item”，通过v-bind属性把item的值动态赋给content变量）
子组件：通过props接收父组件传递的值

子组件向父组件传递值
子组件：通过$emit()方法发布事件广播
父组件：捕获到子组件向外触发的事件，然后可执行相应的方法

methods方法里的this默认指向vue实例

不要把methods方法写成箭头函数，因为箭头函数会改变this的指向，使this不在默认指向vue实例，而指向undefined

同时vue实例中的data，computed，watch属性也都不要写成箭头函数，理由同上

---

父组件

<head-bar :title="title"></head-bar>
title: '我的',

子组件

<template>
  <div id="head"
       class="head">
    <span class="title-left"
          @click="goBack">
      <van-icon name="arrow-left"
                class="leftback" />返回</span>
    <span class="title-mid">{{title}}</span>
    <span class="title-right"></span>
  </div>
</template>

props: {
    title: String
    // default: '首页',
    // required: true
  },

---

vue父组件异步获取数据传给子组件
https://blog.csdn.net/dongguan_123/article/details/80317871
下面这个更加直观一点

学习下这篇文章

下面来看我操作

this.axios.get('api/goods').then((res) => {
  this.recommends = res.data.data.info
   console.log(res.data.data.info)
 }, function(err) {
     console.log(err)
 })
 this.axios.get('api/getgoods').then((res) => {
   this.skuArr = res.data.data.data
   console.log(res.data.data.data)
 }, function(err) {
     console.log(err)
 })

打印一下

给子组件传数据

data() {
    return {
      skuArr: []
    }
  },

子组件

props: {
    skuArr: {}
  },

    

         
{{item.name}}
     
 

这里111是我获取的数据

哝，对比一下

我发现，我前面一直想错了，其实是在点击时候再去发起请求，这样数据就是直接在子组件里面的点击事件里面请求 了，亲测这样是可以实现的，现在的问题是，我之前在登录页面提交的数据是通过路由传到下一个页面的，但是师傅告诉我，尽量不要携带参数上去，那我就再学习一下怎么保存值传到下一个页面吧。