vue 父组件向子组件传参问题请教

在用vue仿写网易云音乐核心功能的时候,在父组件向子组件传参的时候遇到了个问题,实在解决不了,请教下各位
图片描述

如图:上面的歌曲“1沙龙”,"2给你","3兄弟"..这些歌曲都是在父组件上通过v-for循环出来的,且每首歌相关的div我都绑定了个点击事件,现在我就想把点击事件里的相关参数传递给子组件,并让它通过v-bind渲染出来,

代码如下:
父组件中:

<mu-list-item :title="item.name" :describe="item.id" :describeText="item.ar[0].name" @click="listClick(item)">

点击事件如下:

   listClick(item){
          this.singShow=true;
          console.log(item)      
      },

子组件中代码如下:

 <div class="name xmpname">{{list.name}}</div>
<script>
  export default{
    props: [
      'list',
    ],
    created(){
        console.log(this.list);
//        console.log('name='+this.list[0].name)
    }
  }
</script>

我一开始的时候是用props来进行父组件向子组件传参通信的,发现并不起作用,我问题的核心思路就是想把父组件中的单击事件相关的参数传递到子组件渲染出来,即把父组件listClick里面的形参"item"传递到子组件上,能在子组件获取到该参数并渲染出来,想请教各位,不知道有何思路?
PS:现在对vuex还不是太熟悉,用vuex做数据管理这种方式还没能力,用不起来,除了vuex之外还有何种方式?

阅读 4.3k
3 个回答

你可以在data里建一个变量,点击事件的时候把你想传的内容更新到这个变量里,调用子组件的时候,通过props将这个变量传进去,用props应该没问题的

https://cn.vuejs.org/v2/guide/components.html#动态-Props

使用props怎么会没有作用呢?

父组件到子组件数据传递,就用props,是没错的。
子组件中的props应该是一个属性值,比如说传递item.id到子组件。

props: [
    'describe'
]

你这里传递的是属性值吗?

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