早期的 Jquery 编程主要是以事件驱动，Vue 则是直接数据驱动。因此在组件嵌套的时候，没有显示的提供，父组件控制子组件的触发事件。事件控制这一块被弱化了，但是父组件想控制子组件是不是就没有办法了呢？其实不然，Vue 提供了 ref 属性。这样也就可以触发子组件事件。
实例
使用 Element UI <el-upload> 做上传文件功能。这里有一个需求是，当我点击上传按钮时候，需要做一个校验。等校验通过后在执行上传功能。
-- 子组件（这里仅把标签写出来，做示例）
<el-upload>
<slot></slot>
</el-upload>
-- 父组件（<file-upload> 引入的子组件）
<file-upload ref="fileupload" >
<el-button
@click.stop="btnclick"
:disabled="fileUploadDisabled"
size="small"
type="primary"
>上传</el-button>
</file-upload>
// 父组件 js 部分
export default {
methods:{
btnclick(){
// 父组件触发子组件点击事件，触发上传功能
this.$refs.fileupload.$refs.upload.$children[0].$el.click();
}
}
}
关键点
- 给 <el-button> 增加点击事件，并且阻止事件传递。用@click.stop 控制。
- 给<file-upload> 增加 ref 属性，这样可以直接控制子组件
