Vue 父组件触发子组件事件

早期的 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 属性，这样可以直接控制子组件