32vue学习——父组件向子组件传递方法及将子组件的数据传递给父组件

32vue学习——父组件向子组件传递方法及将子组件的数据传递给父组件

前言：

在前面一篇文章中，我们学习了如何将父组件中的数据传递给子组件。那我们父组件的方法是不是也可以传递给子组件调用呢？答案是肯定哒！下面让我们来看看怎么做吧。这次函数的传递的过程中，还包含着如何将子组件的数据传递给父组件。

步骤：

（1）在 Vue 实例的 methods 中定义好父组件的方法：

（2）父组件向子组件传递方法：使用事件绑定机制 v-on 。当我们自定义一个事件属性之后，子组件便可以通过某种方式来调用这个传递进来的方法了

讲解：
（1）func 的值可以由我们来自定义，只要名称合法即可
（2）show 的值是不可以随便定义的，要和父组件定义的名称一致，他是一个表达式，解析的时候会把它当作一个变量名然后去到实例中去找这个变量。首先到 data 中看看有没有这个变量，没有就到 methods 中看看有没有这个方法
（3）show 方法在这里是不能带小括号的，如果带了小括号，就代表将show调用之后再把结果传递 func
（4）不带引号就说明是把这个方法的引用原封不动的传给 func 来保存一份，在 click 里面就可以拿到 func 的这个方法了

（3）在子组件的 methods 中定义一个方法来接收父组件传递过来的方法，使用 this.$emit 来接收

讲解：当点击子组件的按钮的时候，如何拿到父组件传递过来的 func 方法呢？？？
（1）通过 this：代表这个 vue 实例
（2） emit 英文意思：触发、调用、发射的意思

（4）在子组件的模板对象中调用接收了父组件传递过来的函数的方法

（5）当父组件的函数需要传递参数的时候，在emit 的第二个以及第二个参数之后的参数都是传进来的参数——这可以变相的将子组件的数据传递给父组件

子组件的数据传递给父组件