组件之间的通信之父子组件通信

父子组件之间的通信

由父组件向子组件传值： 通过props进行通信。下面先看具体实现
上面这段代码的关键点在于：①首先子组件中要声明出props属性，它的作用就是接收来自父组件的值②其次，在父组件中找到对应的子组件，并在子组件中通过v-on（简写:）将需要传递的值进行绑定。③通过前两步就实现了父传子的过程，最后只需要将传来的数据在需要处显示即可<h4>{{childData}}</h4> //props接收到的值在这里用插值表达式的形式表现出来

由子组件向父组件传值：关键点$emit,下面先看代码子传父过程比较繁琐，我们的需求是在子组件里放一个input输入框，然后要将输入的值在父组件的div中显示出来。
下面看实现的步骤：首先在子组件中定义一个输入函数@input = 'handleInput'，在methods中通过const val = e.target.value拿到我们当前输入的值。
然后在父组件的template中找到子组件，并且自定义一个事件函数<Child @inputHander = 'input'></Child>，并在methods中写入input，methods:{ input(){ } },，注意，此时我们自己定义的函数事件仅仅是挂载，并没有触发。
这时就需要在子组件中用到emit来触发这个事件，触发的同时将值传过去this.emit('inputHander',val).。传过来的val就是我们需要的新值，我们在父组件中接收并定义为newVal：data(){ return{ newVal:'' } },，
然后将最新的newVal赋值即可：methods:{ input(newVal){ this.newVal = newVal; } },

总结：父传子比较简单：实现方式就是是通过props属性，子组件通过props属性接收从父组件传过来的值，而父组件传值的时候使用 v-bind 将子组件中预留的变量名绑定为data里面的数据即可。
子传父较复杂：①子组件中需要以某种方式例如输入事件的方法来触发一个自定义事件；②将需要传的值作为$emit的第二个参数，该值将作为实参传给响应自定义事件的方法；③在父组件中注册子组件并在子组件标签上绑定对自定义事件的监听