vue父组件点击触发子组件事件的实例讲解

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方法

  1. 给子组件注册一个ref="searchForm"
  2. 父组件的fuSublime的方法在处理时,使用了$refs.searchForm把事件传递给子组件的ziSublime方法
  3. 子组件接收到父组件的事件后,调用了ziSublime方法,把valid值并通过中 this.$emit('fuSublime', valid)返回给父组件
  4. 父组件通过@fuSublime='sublime'接收进行操作
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。