Vue-组件数据传递

1.props接收
Recommend.vue

<template>
  <div class="recommend">
  //发送数据到Banner
    <Banner :banners="banners"></Banner>
  </div>
</template>

<script>
import {getBanner} from "../api/index";
import Banner from "../components/Banner"
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Recommend",
  components:{
    Banner
  },
  data(){
    return{
      banners:[]//保存数据
    }
  },
  created() {
      getBanner()
          .then((data)=>{
          //获得数据
         this.banners=data.banners
      })
          .catch(function (err){
         console.log(err);
      })
  }
}
</script>

<style scoped>

</style>

Banner.js

 props:{
    banners:{
      type:Array,//类型为数组
      default:()=>[],//初始化为空数组，空数组必须用箭头函数
      require:true//必须传递的值
    }
  }