vue 父子组件通信(传值，调用方法)攻略搜罗,新人必看！

Vue父子组件在平时开发项目的时候很常用，所以特地来写一篇文章，巩固一下自己这方面的知识

父子组件简单来讲就是在一个vue容器引入另外一个或者多个vue容器，这样可以提高组件的复用性

如何实现父子组件呢？我们先在同一目录下分别创建parent.vue和children.vue两个文件，写入如下代码

嫌麻烦的直接拉到最下面看总结

//parent.vue

//children.vue

这样就是一个简单的父子组件了。

那么接下来父子组件间怎么通信就是一个很重要的问题了。下面逐一演示

父组件 (传数据) -> 子组件 ↓

核心①：父组件用v-bind绑定数据名和数据内容  ->  v-bind:dataname="content"

核心②:：子组件使用props来接受数据  ->  props: ['dataname']

//parent.vue
   // 在子容器上绑定要传递的数据

//children.vue

父组件 调用 子组件的方法 ↓

核心① ：在父组件里的 子组件标签使用ref属性来进行绑定   ref="bindChildrenName"

核心②：在父组件里的methods调用: 语法为 this.$refs.ref属性绑定的名字.子组件的方法名()

//parent.vue
   //使用ref属性绑定子组件

//children.vue

子组件 (传数据) -> 父组件 ↓

核心①： 在父组件里的 子组件标签使用-von属性来进行绑定父组件的方法名  v-on:子组件调用名="父组件方法名"

核心②：在子组件里使用 this.$emit('子组件调用名',args)进行显式调用

其实这个传数据还是要调用父组件方法,没有刚才父组件那样直接传数据即可，可能是考虑到父与子的关系是一对多

//parent.vue
   // 在子容器上绑定要传递的数据

//children.vue

子组件 调用 父组件的方法 ↓

核心① ：在父组件里的 子组件标签使用ref属性来进行绑定   ref="bindChildrenName"

核心②：在父组件里的methods调用: 语法为 this.$refs.ref属性绑定的名字.子组件的方法名()

//parent.vue
   // 子组件调用父组件的方法不用进行绑定

//children.vue

总结：

①父组件 传数据 子组件   

parent.vue：        

children.vue：   props:['toChildData']

②父组件 调用 子组件 方法

parent.vue：        

                         method:    this.$refs.refChildrenName.子组件的方法名()

③子组件 传数据 父组件

parent.vue：    

children.vue：    this.$emit('fromChild',args)

④ 子组件 调用 父组件方法

parent.vue：        

children.vue：    this.$parent.parentMethod(args)