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

O_o华丽丽
  • 130

父组件传值到子组件:比如说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>

对于这几段代码我有点不理解的是(请见上传的图片)
图片描述

回复
阅读 4.8k
4 个回答
✓ 已被采纳

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

父组件传值给子组件,通过props或者状态,props也可以是一个动态的值,但是要实时更新渲染,子组件需要一个机制,子组件可以内部添加一个computed转化,使之可以数据驱动,只要props变化,子组件就会实时更新

可以的,父级prop就是做这个事情的,事实上父级的prop本身也是一个绑定的data

子组件传值给父组件用$emit
API

竟然会踩?
如果不想用这个,在多组件间传值你应该使用Vuex,为什么要纠结这种问题?我是安你要求去答,使用$emit要向上传值就要定义多次,这样有错吗?
要更灵活,你就要用vuex

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏