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

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

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

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

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

//parent.vue
<template>
  <div>
    This is a parent content
    <children></children>     //这里就包含了children.vue的所有内容了
  </div>
</template>

<script>
    import children from './children'    //引入组件
    export default{
        components:{ children },  //注册组件
        data(){
            return{
       
            } 
        }
    }
</script>

//children.vue
<template>
  <div>
    This is children component content
  </div>
</template>

<script>
    export default{
        data(){
            return{
       
            } 
        }
    }
</script>

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

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

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

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

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

//parent.vue
<children v-bind:for-children-data="data"></children>   // 在子容器上绑定要传递的数据

<script>
    export default{
        data(){
            return{
               data： 'from parent data'     //要传递给子组件的数据
            } 
        }
    }
</script>

//children.vue
<script>
    export default{
        props: ['for-children-data'],     //使用props来接受父组件传来的数据
        data(){
            return{
               
            } 
        }
    }
</script>

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

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

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

//parent.vue
<children ref="refChidlren"></children>   //使用ref属性绑定子组件

<script>
    export default{
        data(){
            return{
               
            } 
        },
        methods:{
            this.$refs.refChidlren.childrenMethod()   //这样就可以调用指定子组件的方法了
        }

    }
</script>

//children.vue
<script>
    export default{
        data(){
            return{
               
            } 
        },
        methods:{
            childrenMethod(){
                console.log('父组件调用了我')  //这里可以是子组件内部自己调用，不局限于父组件

            }
        }
    }
</script>

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

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

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

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

//parent.vue
<children v-on:fromChild="parentMethod"></children>   // 在子容器上绑定要传递的数据

<script>
    export default{
        data(){
            return{
              
            },
            methods:{
                parentMethod(argsFromChild){    //这个方法同样也是父子组件可以调用
                    console.log(argsFromChild 是从子组件传来的数据)
                }
            }
        }
    }
</script>

//children.vue
<script>
    export default{
        data(){
            return{
               
            } 
        },
        methods:{
            this.$emit('fromChild',args)     //在子组件里显示的调用父组件的方法
        }
    }
</script>

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

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

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

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

<script>
    export default{
        data(){
            return{
              
            },
            methods:{
                parentMethod(args){    
                    console.log('子组件直接调用我')
                }
            }
        }
    }
</script>

//children.vue
<script>
    export default{
        data(){
            return{
               
            } 
        },
        methods:{
            this.$parent.parentMethod(args)    //在子组件直接调用父组件的方法
        }
    }
</script>

总结：

①父组件 传数据 子组件   

parent.vue：     <children v-bind:toChildData="parentSourceData"></children>   

children.vue：   props:['toChildData']

②父组件 调用 子组件 方法

parent.vue：     <children ref="refChildrenName"></children>   

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

③子组件 传数据 父组件

parent.vue：     <children v-on:fromChild="parentMethod"></children>

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

④ 子组件 调用 父组件方法

parent.vue：     <children></children>   

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