Vue 父组件触发子组件事件

早期的 Jquery 编程主要是以事件驱动，Vue 则是直接数据驱动。因此在组件嵌套的时候，没有显示的提供，父组件控制子组件的触发事件。事件控制这一块被弱化了，但是父组件想控制子组件是不是就没有办法了呢？其实不然，Vue 提供了 ref 属性。这样也就可以触发子组件事件。

实例

使用 Element UI 做上传文件功能。这里有一个需求是，当我点击上传按钮时候，需要做一个校验。等校验通过后在执行上传功能。

-- 子组件（这里仅把标签写出来，做示例）
 
    
 

-- 父组件（ 引入的子组件）

        上传
 

// 父组件 js 部分
export default {
  methods:{
        btnclick(){
             // 父组件触发子组件点击事件，触发上传功能
            this.$refs.fileupload.$refs.upload.$children[0].$el.click();
        }
    }
}

关键点

• 给 增加点击事件，并且阻止事件传递。用@click.stop 控制。
• 给 增加 ref 属性，这样可以直接控制子组件