vue.js - vue 关于父组件向子组件传值问题

问题描述

问 题

父组件传值到子组件:比如说A子组件，可不可以通过prop动态将A爷的值传给A？

看到别人有一段代码这样写的：

Mygroup.vue文件：(这里我说的爷组件文件)

<template>
    <div class="group">
        <template  v-if="!loadingValue">
            <v-group :groupData="group_book" title="读书"></v-group>
        </template>
    </div>
</template>

<script>
import group from '../../components/group.vue'
    export default{
        data () {
         return {
          group_book: {}
          }
        },
      components: {
        'v-group': group
      },
      created () {
        this.getGroupData()
      },
      methods: {
        getGroupData () {
          axios.get('../../static/group.json').then((res) => {
            let data = res.data.object
            data.forEach((value, index) => {
              if (value.type === '读书') {
                 this.group_book = value.data
              } 
            })
            this.loadingValue = false
          })
        }
      }        
    }
</script>

group.vue文件：(这里我说的父组件文件)

<template>
  <div class="group-item">
    <div class="group-item-title">{{title}}</div>
    <v-groupItem :groupData="groupData"></v-groupItem>
  </div>
</template>

<script>
    import groupItem from './groupItem.vue'
    export default{
      props: [
        'groupData',
        'title'
      ],
      data () {
        return {
        }
      },
      components: {
        'v-groupItem': groupItem
      }
    }
</script>

groupItem.vue文件：(这里我说的子组件文件)

<template>
    <ul>
      <li v-for="item in groupData">
          <h3>{{item.title}}</h3>
      </li>
    </ul>
</template>

<script>
    export default{
      props: [
        'groupData'
      ],
      data () {
        return {
        }
      }
    }
</script>

对于这几段代码我有点不理解的是（请见上传的图片）

解决方案

可以，但是要衔接上。感觉你的组件使用情况应该是：A爷->A父->A。组件A爷在使用组件A父的时候，将该数据传给A父，然后组件A父在使用组件A时，将该数据传交给A，这样A就可以使用该数据。如果A父不去传值，则A组件获取不到A爷组件上的数据的。

这篇关于vue.js - vue 关于父组件向子组件传值问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！