父组件APP.vue

• ref相当于id，id获得的是子组件的html框架，ref获得的是组件实例对象
• 获得组件实例对象，用$on绑定一个自定义事件
• 函数在父组件中定义，但是要在子组件中触发

<template>
<div>这里会有个值：{{x}}
     <Student ref="t"></Student>
</div>
   
</template>

<script>
import Student from './components/Student.vue'
export default {
    name: "App",
    components:{Student},
    data(){
        return {
            x:''
        }
    },
    methods:{
        test(x){
            console.log(x)
            this.x = x
        }
    },
    mounted(){
        // 获得组件实例对象，用$on绑定一个自定义事件
        // 第一参数是事件名,第二个是绑定的方法
        // 第一个参数的事件名,由子组件调用$emit触发,要这么写$emit('aaa','好的')

        this.$refs.t.$on('aaa',this.test)
    }
}
</script>

子组件 Student.vue

<template>
  <div>
    <h1>这是一个组件，Student组件</h1>
    <button @click="dian">点击可以把这个组件的数据传递给父组件</button>
  </div>
</template>

<script>
export default {
data () {
  return {
    num:2
  }
},
methods: {
  dian(){
    // 第一个参数是事件名，
    // 第二个参数给事件绑定的产生传参
    // 第一个参数必须和父组件的调用的$on 方法的第一个参数一致
    this.$emit('aaa','好的')
  }
}
}
</script>

• 流程：

  
  ref绑定组件自定义事件.PNG

• 点击按钮效果：

  
  有值了.PNG

流程图：

总结

• 在组件绑定自定义事件，先用ref获得组件实例，
  再绑定事件，用emit调用，第一个参数和emit第二个参数是$on方法第二个参数的入参
• this.on('aaa',this.test)

•    this.$emit('aaa','好的')