Vue父子组件通信的问题，父子之间事件事件派发与接收，在这里我使用的是ref
给子组件注册引用信息。[官网]是这样解释的
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素; 如果用在子组件上，引用就指向组件实例:
父组件
//父组件的点击事件
<button @click="fuSublime">提交事件</button>
//调用自组件,子组件注册一个ref="searchForm"
<zi @fuSublime='sublime' ref="searchForm" ></zi>
// 点击父组件的事件
fuSublime(){
//引用ref,点击子组件的ziSublime()
this.$refs.searchForm.ziSublime()
},
// 接收子组件返回的值
sublime(e){
if(e){
//返回的是true
this.addDialogVisible = false
}
},
- 子组件 zi.vue
methods: {
ziSublime() {
// 自组件的点击事件
this.$refs['searchForm'].validate((valid) => {
if (valid) {
//返回父组件
this.$emit('fuSublime', valid)
} else {
return false
}
})
}
}
1.父组件的button元素绑定click事件,该事件指向fuSublime方法
- 给子组件注册一个ref="searchForm"
- 父组件的fuSublime的方法在处理时，使用了$refs.searchForm把事件传递给子组件的ziSublime方法
- 子组件接收到父组件的事件后，调用了ziSublime方法，把valid值并通过中 this.$emit('fuSublime', valid)返回给父组件
- 父组件通过@fuSublime='sublime'接收进行操作
