vue项目笔记（15）-父子组件传值

向右看齐 2021-09-16 02:34 360阅读 0赞

# 父子组件传值 #

在上节中，我们已经请求到数据，现在来实现数据的传递（父→子），我们结合代码，以Recommend组件为例：

1、 首先，在data中声明数组recommendList，将请求到的数组，赋值给recommendList。

<script>
      import axios from "axios"
      import HomeHeader from "./components/Header";
      import HomeSwiper from "./components/Swiper"
      import HomeIcons from "./components/Icons"
      import HomeRecommend from "./components/Recommend"
      import HomeWeekend from "./components/Weekend"
      export default {
        name: "Home",
        data() {
          return {
            city: '',
            iconList:[],
            recommendList:[],
            swiperList:[],
            weekendList:[]
          };
        },
        components: {
          HomeHeader,
          HomeSwiper,
          HomeIcons,
          HomeRecommend,
          HomeWeekend
        },
        mounted(){
          this.getHomeInfo();
        },
        methods: {
          getHomeInfo(){
            // axios返回的结果是一个promise对象
            axios.get('/api/index.json').then(
              // 注意：这里绝对不可以写成this.getHomeInfoSucc（），否则请求的结果会是undefined
              this.getHomeInfoSucc
            )
          },
          getHomeInfoSucc(res){
            console.log(res);
            res = res.data;
            if (res.ret && res.data) {
              this.city = res.data.city;
              this.swiperList = res.data.swiperList;
              this.iconList = res.data.iconList;
              this.recommendList = res.data.recommendList;
              this.weekendList = res.data.weekendList;
            }
          }
        }
      };
    </script>

2、然后，在父组件Home中引入Recommend组件，<home-recommend ***:list="recommendList"***></home-recommend>

<template>
      <div class="home">
        <home-header :city="city"></home-header>
        <home-swiper :list="swiperList"></home-swiper>
        <home-icons :list="iconList"></home-icons>
        <home-recommend :list="recommendList"></home-recommend>
        <home-weekend :list="weekendList"></home-weekend>
      </div>
    </template>

3、利用props传值，在Recommend组件中声明props，定义list类型为Array。

<script>
      export default{
        name: "HomeRecommend",
        props:{
          list: Array
        }
      }
    </script>

4、最后，利用v-for指定实现数据的循环绑定，需要注意的是，这里需要使用v-for="item of ***list***"，代码如下：

<template>
      <div class="recommend">
        <div class="recommend-title">热销推荐</div>
        <ul>
          <li class="item border-bottom" v-for="item of list" :key="item.id">
            <img class="item-img"
                 :src="item.imgUrl">
            <div class="item-info">
              <p class="item-title">{
       {item.title}}</p>
              <p class="item-desc">{
       {item.desc}}</p>
              <button class="item-button">查看详情</button>
            </div>
          </li>
        </ul>
      </div>
    </template>

5、其他组件的数据传递与此雷同，此处不再赘述。

发表评论取消回复

表情：

评论列表（有 0 条评论，360人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 父子组件传值

新建子组件新建一个模板对象com1，然后在vm中的components里注册一下，就可以使用com1标签了，标签内容就是子元素的内容。 //子组件 v

淡淡的烟草味﹌/ 2023年07月21日 08:40/ 0 赞/ 20 阅读

相关 vue 父子组件传值

父组件通过属性传值 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

蔚落/ 2023年07月10日 15:58/ 0 赞/ 22 阅读

相关 Vue父子组件传值

首先创建基础项目 https://blog.csdn.net/sunt2018/article/details/102697487 然后写一个父子组件 `App.vue`

Love The Way You Lie/ 2023年05月31日 06:46/ 0 赞/ 3 阅读

相关 vue 父子组件传值

父子组件传值最常用的方法（4种） ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0

比眉伴天荒/ 2023年01月16日 02:43/ 0 赞/ 319 阅读

相关 Vue - 组件传值（父子组件间传值、非父子组件间传值）

推荐：[Vue汇总][Vue] Vue - 组件传值（父子组件间传值、非父子组件间传值）如果你对组件不太了解，推荐你先阅读它：[Vue - Vue组件基础][Vue

我就是我/ 2022年12月21日 11:00/ 0 赞/ 313 阅读

相关学习笔记——Vue中父子组件传值

-------------------- > 在vue中，使用组件时，我们可能会在一个页面级组件中调用其他功能组件，例如数量加减的组件，那么如何使父子组件之间进行通信哪？

左手的ㄟ右手/ 2022年11月20日 08:20/ 0 赞/ 162 阅读

相关 vue父子组件传值

作者：小小字符链接：https://www.jianshu.com/p/4f2c0acedb04 來源：简书 1.前言组件是Vue.js最推

悠悠/ 2022年05月27日 10:50/ 0 赞/ 310 阅读

相关 Vue父子组件传值

Vue父子组件传值：有四种方式：props，ref，emit 和模板传递通信slot 通过props来传值：静态传值就是直接通过props来传递动态传值是通

Dear 丶/ 2022年01月22日 15:15/ 0 赞/ 383 阅读

相关 vue父子组件传值

父组件 <template> <div> <h1>我是父组件</h1> <hello :msg="ad

小咪咪/ 2021年09月17日 02:04/ 0 赞/ 535 阅读

相关 vue项目笔记（15）-父子组件传值

父子组件传值在上节中，我们已经请求到数据，现在来实现数据的传递（父→子），我们结合代码，以Recommend组件为例： 1、首先，在data中声明数组rec

向右看齐/ 2021年09月16日 02:34/ 0 赞/ 361 阅读