Vue-父子组件间传值(props,自定义事件+$emit（）,ref)

主要是子组件给父组件传值

一、案例

School.vue和Student.vue子组件要和父组件App之间产生数据交互

需求1：点击“把学校名给App”按钮将学校名传给App

实现：

APP.vue

（1）App里定义获取学校名的方法getSchoolName

methods：{
getSchoolName(name){
                console.log('App收到了学校名：',name)
            }
}

(2)通过在School组件标签里添加getSchoolName方法将该方法传递给School组件

School.vue

(3)School组件需要用props来接收这个方法类型的值

(4)按钮绑定sendSchoolname( )方法的click事件，methods里添加该方法用来发送name，同时调用props里接收来的getSchoolName( )方法来传参

把学校名给App
//...
export default {
        name:'School',
        props:['getSchoolName'],
        data() {
            return {
                name:'哈佛',
                address:'美国',
            }
        },
        methods: {
            sendSchoolName(){
                this.getSchoolName(this.name)
            }
        },
    }

---

需求2：点击“把学生名给App”按钮将学生名传给App

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

1. 实现1：使用@或v-on

App.vue

(1)给Student组件的实例对象vc上绑定自定义事件atguigu,如果有人触发了该事件，getStudentName函数就会被调用。

(2)在methods中配置getStudentName( )

getStudentName(name,...params){
                console.log('App收到了学生名：',name,params)
                this.studentName = name
            }

Student.vue

(3)按钮绑定sendStudentname( )方法的click事件，methods里添加该方法，调用$emit( )方法触发事件。

把学生名给App
methods: {
            sendStudentlName(){
               //触发Student组件实例身上的atguigu事件，触发后sendStudentname()被调用，同时接收name
                this.$emit('atguigu',this.name，666)
                // this.$emit('demo')
                // this.$emit('click')
            }
}

2. 实现 2：使用ref(更灵活）

App.vue

(1)在Student子组件标签里添加ref注册引用信息。通过this.$refs.student获取Student组件的实例对象。（里面的student相当于组件Student的id)

(2)添加生命周期钩子mounted()

mounted() {
            this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件
            // this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）
        },

PS:ref属性：

1. 被用来给元素或子组件注册引用信息（id的替代者）

2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）

3. 使用方式：

1. 打标识：```

.....

``` 或 ``````

2. 获取：```this.$refs.xxx```

3. 对比：方法2比方法1更灵活，原因在于如果想等App组件挂载完毕后等5秒钟才给Student子组件绑定自定义事件，用方法1就不能实现，因为模板解析时，会给Student瞬间绑定。

---

二、总结

子组件给父组件传值通常来说有三种方法：

1. 通过父组件给子组件传递函数类型的props实现：子给父传递数据

2. 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on）

3. 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref）

4. props适用于：

5. (1)父组件 ==> 子组件 通信

6. (2)子组件 ==> 父组件 通信（要求父先给子一个函数）