Vue父子组件之间传值问题

在Vue框架中,最大的特点就是组件化,也就是说组件调用组件,而这两个组件又有联系,所以难免出现父子组件的传值问题。在Vue项目中,父子组件传值的出现频率会比较高。
父子组件传值分为:父组件向子组件传值和子组件向父组件传值这两种情况。
1. 父组件向子组件传值:

  1. 父组件要向子组件传值,首先把要传递的值绑定到子组件中,这里绑定的是activeName值。
    Vue父子组件之间传值问题
  2. 在子组件中用props接收父组件传递过来的值,activeName属性名称与父组件传递的属性名称一致即可接收到父组件的值。
    Vue父子组件之间传值问题

2. 子组件向父组件传值:

  1. 在子组件中使用$emit属性发送,其中发送的属性为childFn,值为totalCount
    Vue父子组件之间传值问题
  2. 在父组件中用@childFu(子组件自定义属性名)来表示事件,然后绑定方法来接收子组件的传递过来的值。 Vue父子组件之间传值问题