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

Question

在用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之外还有何种方式？

Answer 1

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