vue3 使用 setup 函数时父子组件事件的触发

父组件触发子组件事件

 

1. 父组件内使用子组件, 并且给出  ref 值

  <EditCpts ref="editCptsRef" @refresh="refresh" />

2. setup 函数中获取引用

    const editCptsRef = ref()

3. 需要把引用导出去, 不然会是 undefined

setup() {
  ...

  return { editCptsRef }        
}

4. 触发

    // 编辑
    const edit = (row) => {
      editCptsRef.value.open(row)
    }

5. 子组件中定义 open 方法, 并且使用 return 正常导出 setup 就行

 

 

 

 

子组件触发父组件方法

1. 父组件定义事件, 并且传递给子组件

  <EditCpts ref="editCptsRef" @refresh="refresh" />

2. 子组件接收事件

  emits: ['refresh'],

3. 触发父组件事件

 setup(props, { emit }) {

  const confirm = () => {
         emit('refresh')
    }  
}