Vue 父子组间通讯（props、$ref、$emit）

在简绍通信之前，我么你先来建两个组间father.vue和child.vue作为实例的基础。

//父组件
<template>
    <div>
        <img src="../../assets/img.jpeg">
        <h1>我是父花花</h1>
        <child></child>
    </div>
</template>

<script>
    import Child from './child'
    export default {
        name: "father",
        components:{
            Child
        }
    }
</script>

//子组件
<template>
    <div>
        <h3>我是子花花</h3>
    </div>
</template>

这两部分代码很清楚，父组间通过import的方式导入子组件，并在components属性中注册，然后就可以以标签<child>的形式嵌套进父组件，运行father.vue后，如图：

效果图1

---

1、通过prop实现通信

子组件的props能接受父组件的数据，仅仅是接受，props是单向绑定的，即只能父组间向子组件传值，不能反向。具体可查看官方文档。

prop的专递方式有两种：

（1）静态传递

子组件通过props选项声明一个自定义属性，父组件可以在嵌套标签的时候，通过这个属性往子组件传递数据。

//父组件
<template>
    <div>
        <img src="../../assets/img.jpeg">
        <h1>我是父花花</h1>
        <child message="我是子花花"></child><!--通过自定义属性传递数据-->
    </div>
</template>

<script>
    import Child from './child'
    export default {
        name: "father",
        components:{
            Child
        }
    }
</script>

//子组件
<template>
    <div>
        <h3>{{message}}</h3>
    </div>
</template>

<script>
    export default {
        name: "child",
        props:[
            'message'//声明一个自定义的属性
        ]
    }
</script>

（2）动态传递

我们可以像上面一样给props传入一个静态的值，但更多时候需要动态传数据，这时候我们可以通过v-bind动态传值，使用v-bind绑定props的自定义属性，传递过去的就不是静态字符串了，还可以传递数字、布尔值、对象、数组等任何类型的值，具体可查看官方文档。

//父组件
<template>
    <div>
        <img src="../../assets/img.jpeg">
        <h1>我是父花花</h1>
        <child message="我是子花花"></child>
        <child :message="msg"></child><!-- 用一个变量进行动态赋值。-->
        <child :message="msg1+msg2"></child>
    </div>
</template>

<script>
    import Child from './child'

    export default {
        name: "father",
        components: {
            Child
        },
        data() {
            return {
                msg:'我是子花花二'+Math.random(),
                msg1:'我是子花花三',
                msg2:'xiahuahua',

            }
        }
    }
</script>

//子组件
<template>
    <div>
        <h3>{{message}}</h3>
    </div>
</template>

<script>
    export default {
        name: "child",
        props:[
            'message'//声明一个自定义的属性
        ]
    }
</script>

效果如图：

效果图2

2、通过$ref实现通信

对于ref，官方的解释是：ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $ref 对象上。
对于官方的解释，可以这样理解：

• 如果ref用在子组件上，指向的是组间实例，可以理解为子组件的索引，通过$ref可以获取到在子组件里定义的属性和方法。
• 如果ref用在DOM元素上，引用指向的就是DOM元素，通过$ref 可以获取DOM元素的属性集合，作用与JQ选择器类似。

//父组件
<template>
    <div>
        <img src="../../assets/img.jpeg">
        <h1>我是父花花</h1>
        <child ref="msg"></child>
    </div>
</template>

<script>
    import Child from './child'
    export default {
        name: "father",
        components:{
            Child
        },
        mounted(){
            console.log(this.$refs.msg);
            this.$refs.msg.getMessage('我是子花花!~');
        }
    }
</script>

//子组件
<template>
    <div>
        <h3>{{message}}</h3>
    </div>
</template>

<script>
    export default {
        name: "child",
        data() {
            return {
                message:''
            }
        },
        methods: {
            getMessage(msg) {
                this.message = msg;
            }
        }
    }
</script>

从上面代码可以看出，通过ref=‘msg’可以将子组件child的实例给ref，并且通过this.refs.msg)打印出来的数据，如图所示：

console.log

最后效果如图：

效果图3

补充：prop和$ref之间的区别

• prop注重数据的传递，它并不能调用子组件里的属性和方法。像创建文章组间时，自定义标题和内容这样的场景，最适合使用prop。
• $ref注重于索引，主要用来调用子组件里的属性和方法，其并不擅长数据传递；而ref用在DOM元素时，能当做选择器的使用，这个功能比作为索引更常用到。

3、通过$emit实现通信

上面两种方法主要是父组件向子组件通信，而通过emit在官网上解释的很朦胧，按我的理解，就是子组件中的$emit就是发送参数，父组件中的“@关键名”就是接受参数，然后基于这个逻辑丰富代码，实现想要的功能效果。

//父组件
<template>
    <div>
        <img src="../../assets/img.jpeg">
        <h1>{{msg}}</h1>
        <child @getMessage="showMsg"></child>
    </div>
</template>

<script>
    import Child from './child'

    export default {
        name: "father",
        components: {
            Child
        },
        data() {
            return {
                msg: ''
            }
        },
        methods:{
            showMsg(msg){
                this.msg = msg;
            }
        }
    }
</script>

//子组件
<template>
    <div>
        <h3>我是子花花!~</h3>
    </div>
</template>

<script>
    export default {
        name: "child",
        mounted(){
            this.$emit('getMessage','我是父花花@-@');
        }
    }
</script>

效果图4