父组件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获得组件实例，
  再绑定事件，用emit调用，第一个参数和emit第二个参数是$on方法第二个参数的入参
• this.on( aaa ,this.test)

•    this.$emit( aaa , 好的 )