Vue通信组件之四：子组件向父组件传值

1、自定义事件 

     当子组件需要向父组件传递数据时，就要用到自定义事件。Vue的子组件用$emit()来触发事件，父组件用$on()来监听子组件的事件。父组件也可以直接在子组件的自定义标签上使用v-on来监听子组件触发的自定义事件。

使用要求：在子组件中通过$emit()把值传递给父组件，父组件使用v-on:xxx(或者使用语法糖@xxx)；但是需要注意$emit()第一个参数是自定义事件的名称。

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

   
总数：{{total}} 
   

 

2、使用v-model

在父组件上使用v-model指令，子组件使用this.$emit('input',this.子组件属性)

      尽管Vue允许子组件去修改父组件数据，但在业务中，子组件应该尽量避免依赖父组件的数据，更不应该去主动修改它的数据，因为这样使得父子组件紧耦合，只看父组件，很难理解父组件的状态，因为它可能被任意组件修改，理想情况下，只有组件自己能修改它的状态。父子组件最好还是通过props和$emit来通信。

3、应用功说明

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

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