关于Vue中“父子”传递数据及方法问题（$emit( )和props:[ ]的使用）

关于Vue

• 关于Vue的说明，大家可以参考vue的官方文档，在学习一项中，我们可以详细的了解到vue的教程及API。这里不再累述，直接进入标题内容。
• 在vue中，我们可以利用组件，来简化代码量，把更多的时间，用在功能实现的逻辑思维上。在组建各个模块时，我们不可能把所要用到的每一个方法或数据，都要在该组件中定义一份，要想做到各个组件间的数据的互通性，及方法的调用问题，就会想到父子组件的数据传送问题。下面进行详细描述：

父子组件中data数据传输问题（父传子）

这一问题，可以实现子组件使用父组件中的data数据。在Vue中，关于data数据传输问题（父传子），我们首先要想到，属性绑定（v-bind或 ‘:’），它实现的注意步骤是：

• 在父组件上（调用在父组件上注册的标签上），进行一个自定义属性的绑定 -----> 在子组件内部，使用实例自带的props：[ ]，注册绑定好的属性，然后在子组件内，便可以使用指定的父组件中的数据了。

这种数据的传递，其实也不难，一共只需要两步，便可完成，数据的‘父传子’问题。但是要注意，当父传子设定完成后，虽然子组件可以读到，从父组件中传递来的指定数据，在子组件中，我们可以任意的使用，但是不建议修改此数据。

• 从父组件中传来的数据，子组件中，我们可以任意的使用，当然我们也可以修改此数据，但是不建议在子组件中，来修改父组件中传来的数据。

子组件调用父组件中的方法（子传父）

这种问题，较上一问题略微复杂一点，其实，两者之间略微相似。在上一问题中，我们用到了，属性绑定及props属性注册，通过这两步，便可完成数据是父传子问题。同样，在子传父，这一问题中，我们也可以将此与父传子进行对比：

• 在子传父中，思路是这样：
  在父组件中，先自定义一个，以事件绑定（v-on：或‘@’）的属性，它的值是父组件中的指定方法；
  然后，在子组件中，同样注册一个事件，在此事件处理函数中，以 this.$emit(‘事件绑定的自定义属性’ , ‘参数’ , …)。
  这样便可以了。

这样完成之后，在子组件中，不仅可以调用父组件中的方法，而且还可以向父组件中传参（数据）。在组件中，我们也是通过此种方法，来修改父组件中的数据。子传父，这一概念，我认为，主要看你怎样理解，想的方式不同，问题的切入方式不同，那么到底是父传子，还是子传父呢？

当然，我个人，将此区位，分为两种：

• 在子组件中的：this.$emit()中，要是没有传参，就是父传子；
• 在子组件中的：emit()方法中，要是有参数的传递，那就是，父子间互相传递，即父向子中传递了一个方法，并且子向父中，传递了数据（具体传了多少数据，看你的参数的个数）。