vue父子组件间通信

目录

父子间传递数据

方法1：通过传递函数类型的props实现

方法2：通过父组件给子组件绑定一个自定义事件实现

方法3：通过使用ref子给父传递数据

---

父子间传递数据

方法1：通过传递函数类型的props实现

案例：

学校与学生分别是两个小组件，装在App大组件中

点击按钮出现弹窗

                                     

 

 首先要在School组件中的button按钮绑定上点击事件，用来传递value值

<template>
    <div class="school">
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <button @click="sendSchoolName">把学校名给App</button>
    </div>
</template>

接下来在父组件App中也加上最终要实现弹窗的方法

methods: {
    getSchoolName(schoolName) {
        alert(schoolName)
    },

getSchoolName需要加上形参的原因是，该方法需要在在School组件中的获取到value值(即学校的名字)，在School组件中也是需要有形参的

之后将该方法传递给子组件School

 <School :getSchoolName="getSchoolName" />

接下来在子组件School中接收该方法（利用props属性）

 props:['getSchoolName']

子组件中添加上该方法

 methods: {
     sendSchoolName(){
         this.getSchoolName(this.name)
        }
    },

这个是通过父组件给子组件传递函数类型的props实现，子给父传递数据，也是最直观的方法

方法2：通过父组件给子组件绑定一个自定义事件实现

这个方法不需要父子之间来回传递接收

首先在父组件的引用组件标签中注明要绑定的事件名称

v-on在Student这个组件标签上，所以说是给Student这个组件的实例对象vc身上绑定的事件，事件名字就叫bridge（接收数据的函数），一旦触发这个事件，getStudentName函数（触发事件的函数）就会调用

写一个组件标签，底层就会创建一个VueComponent对象

  <Student v-on:bridge="getStudentName" />

接下来在App组件中添加上触发事件的函数

 methods: {
     getStudentName(name){
         alert(name)
     },
},

下面就是要触发这个传输数据的事件bridge

原则：给谁绑定的事件，就用谁去触发这个事件，所以就要找到Student组件的实例对象了

<button @click="sendStudentName">把学生名给App</button>

接下来添加事件sendStudentName事件属性

借助一个特殊的方法$emit，可以认为是触发的意思，参数分别是要触发的事件('bridge'),以及要传递的数据vc的实例对象name,写法即为this.name

 methods: {
     sendStudentName() {
         //触发Student组件实例身上的atguigu事件
         this.$emit('bridge',this.name)
        },
    }

方法3：通过使用ref子给父传递数据

通过App组件的实例对象，vc.$refs.student就可以获取到子组件的实例对象

在第二种方法Student拥有senStudentName方法和bridge事件的基础上，对App组件进行修改

 <Student ref="student"/>

当vm挂载完毕，获取到Student的组件实例对象(this.$refs.student)

当bridge这个事件被触发时，执行弹窗事件getStudentName

 mounted(){
     //this.$refs.student【student的组件实例对象】
     this.$refs.student.$on('brideg',this.getStudentName)
    }

第三种方法和第二种方法的区别就是，绑定时机不同，原理是一样的。