vue3父子组件交互问题，哪种写法更优，为什么？

描述：在父组件引入子组件，子组件是一个弹窗，两种方式都可实现，哪种写法更好，为什么？方式1是在父组件定义控制子组件是否打开的参数以及传递的参数，在子组件进行监听赋值方式2是用ref操作子组件方法

方式一：

父组件
<template>
   <el-button
     text
      type="warning"
      icon="CircleCheck"
     @click="handleSetRole(scope.row)"
   >分配角色</el-button>
   <AssigningRoles
      :is-open="isOpen"
      :params-data="paramsData"
      @get-role-result="getRoleResult">
   </AssigningRoles>
</template>
<script setup>
    const isOpen = ref(false) // 控制子组件是否显示
    const paramsData = ref({}) // 其他数据传递
    // 方法
    const handleSetRole = () => {
       isOpen.value = true
       paramsData.value = {
           account: row.account,
           nickname: row.nickname
        }
     }
     分配角色回调
     const getRoleResult = (flag) => {
         isOpen.value = false
         flag && getList()
      }
</script>

子组件
<template>
 <el-dialog
    title="分配角色"
    v-model="isOpen"
    width="500px"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel">
    <el-form>
        <el-input v-model="form.account"></el-input>
        ....
     </el-form>
     <template #footer>
      <el-button text @click="cancel">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </template>
 </el-dialog>
</template>
<script setup>
    const { proxy } = getCurrentInstance()
    const form = reactive({
       account: '',
       nickname: '',
       role: []
    })
   // props
    const props = defineProps({
      isOpen: {
        type: Boolean,
        default: false
      },
      paramsData: {
        type: Object,
        default: () => ({})
      }
    })
    const { isOpen } = toRefs(props)
    // watch监听
    watch(
      () => props.paramsData,
      (newVal, oldVal) => {
        form.account = newVal.account
        form.nickname = newVal.nickname
        form.role = []
      },
      { immediate: true, deep: true }
    )

    // 子组件传父组件emit
    const emit = defineEmits(['get-role-result'])
    // 取消
    const cancel = () => {
      emit('get-role-result', false)
    }
    // 提交
    const submitForm = () => {
      assignUserRole(form.value).then((res) => {
        proxy.$modal.msgSuccess('分配成功')
        emit('get-role-result', true)
      })
    }
</script>

方式二：

父组件
<template>
   <el-button
     text
      type="warning"
      icon="CircleCheck"
     @click="handleSetRole(scope.row)"
   >分配角色</el-button>
   <AssigningRoles
      ref="editFormRef"
      @getEditResult="editEvent">
   </AssigningRoles>
</template>
<script setup>
    const editFormRef = ref(null)
    // 分配角色
    function handleSetRole(row) {
      proxy.$refs.editFormRef.openEditForm(row)
    }
    // 分配角色回调
    function editEvent() {
      getList()
    }
</script>

子组件
<template>
 <el-dialog
    title="分配角色"
    v-model="editVisible.visible"
    width="500px"
    append-to-body
    :close-on-click-modal="false"
    @close="cancel">
    <el-form>
        <el-input v-model="form.account"></el-input>
        ....
     </el-form>
     <template #footer>
      <el-button text @click="cancel">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </template>
 </el-dialog>
</template>
<script setup>
    const { proxy } = getCurrentInstance()
    // 定义form表单数据
    const form = reactive({
      account: '',
      nickname: '',
      role: []
    })
    // 编辑窗口参数
    const editVisible = reactive({
      visible: false // 窗口开关
    })
    const emit = defineEmits(['getEditResult'])
    const openEditForm = (data) => {
      form.account = data.account
      form.nickname = data.nickname
      form.role = []
      editVisible.visible = true
    }
    // 取消
    const cancel = () => {
      editVisible.visible = false
    }
    // 提交
    const submitForm = () => {
      assignUserRole(form.value).then((res) => {
        proxy.$modal.msgSuccess('分配成功')
        editVisible.visible = false
        emit('getEditResult')
      })
    }

    defineExpose({ openEditForm })

</script>