父传子值使用---前后端交互实现首页中轮播图效果实现

最新推荐文章于 2024-07-20 16:41:37 发布

原创最新推荐文章于 2024-07-20 16:41:37 发布

· 295 阅读

1 ·

版权

文章标签：

#vue

父传子值
在父亲里先用import HomeBanner from "./Component/Banner";引入，在template中声明

<!-- 视频列表组件 -->
    <video-list :videoList="videoList"></video-list>
    <!-- 底部导航栏组件 -->
    <common-footer></common-footer>

3.需要在script中`

export default {
  //注册组件
  components: {
    HomeBanner,
    VideoList,
    CommonFooter
  },

4.如果组件中有数据需要传入则声明自己的数据源并写好方法

//声明数据源
  data() {
    return {
      banners: [],
      videoList: []
    };
  },
  //定义方法
  methods: {

     // 获取轮播图数据
    async getBannerData() {
      try {
        const result = await getBanner();
        console.log(result);
        console.log(result.data.code == 0)
        if (result.data.code == 0) {
          this.banners = result.data.data;
        }
      }catch(error){
          console.log(error)
      }
    },

    //获取视频列表
    async getVList(){
        try{
            const result = await getVideoList();
            if (result.data.code == 0) {
                this.videoList = result.data.data;
            }
        }catch(error){
            console.log(error)
        }
    }
  },
  mounted(){
      //页面渲染完成调用方法获取数据
      this.getBannerData();
      this.getVList()
  }
};
</script>

5.子组件需要用到props属性

<template>
  <cube-slide :data="banners">
    <cube-slide-item v-for="(item, index) in banners" :key="index">
      <a :href="item.url">
        <img :src="item.img" style="width: 100%" />
      </a>
    </cube-slide-item>
  </cube-slide>
</template>

<script>
export default {
  //获取父组件传递过来的值
  props: {
    banners: {
      type: Array,
      required: true,
    },
  },
};
</script>

<style>
</style>