Vue.js 父组件向子组件传值和子组件向父组件传值

父组件向子组件传值

1. 组件实例定义方式，注意：一定要使用props属性来定义父组件传递过来的数据

2. 使用v-bind或简化指令，将数据传递到子组件中：

子组件向父组件传值

1. 原理：父组件将方法的引用，传递到子组件内部，子组件在内部调用父组件传递过来的方法，同时把要发送给父组件的数据，在调用方法的时候当作参数传递进去；
2. 父组件将方法的引用传递给子组件，其中，getMsg是父组件中methods中定义的方法名称，func是子组件调用传递过来方法时候的方法名称

3. 子组件内部通过this.$emit('方法名', 要传递的数据)方式，来调用父组件中的方法，同时把数据传递给父组件使用

评论列表案例

目标：主要练习父子组件之间传值

  
  
  
  
  
  



  



    


    

      

        评论人： {{ item.user }}
        {{ item.content }}