父组件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
流程图：
流程.PNG
总结
- 在组件绑定自定义事件，先用ref获得组件实例，
再绑定事件，用emit调用，第一个参数和
emit第二个参数是$on方法第二个参数的入参
- this.
on('aaa',this.test)
this.$emit('aaa','好的')
