vue3中为什么使用nextTick还是无法获取组件的ref值？

Z时代
2024-02-07
分类：IT

<template>
  <el-card>
    <MySearch v-model="query" title="添加角色" @add="showDialog" />
    <PageContent
      ref="pageContentRef"
      :query="query"
      :content-table-config="contentTableConfig"
      page-name="role"
      @edit="handleEdit"
    />
    <MyDialog
      ref="myDialogRef"
      page-name="role"
      :form-config="formConfig"
      :default-info="defaultInfo"
      :permission-list="permissionList"
    >
      <el-tree
        ref="elTreeRef"
        :data="menuList"
        show-checkbox
        node-key="_id"
        :props="{ children: 'children', label: 'name' }"
        @check="handleChangeCheck"
      />
    </MyDialog>
  </el-card>
</template>
<script setup>
import { ref, computed, nextTick } from 'vue'
import { useStore } from 'vuex'
import MySearch from '@/components/search/search.vue'
import PageContent from '@/components/page-content/page-content.vue'
import MyDialog from '@/components/dialog/dialog.vue'
import { contentTableConfig } from './config/table.config'
import { formConfig } from './config/form.config'
import { useSearch } from '@/hooks/use-search'
import { useDialog } from '@/hooks/use-dialog'
// hooks
const { query, pageContentRef } = useSearch()
const { myDialogRef, defaultInfo, showDialog, handleEdit } = useDialog(
  null,
  editFn
)
// data
const elTreeRef = ref()
const permissionList = ref({})
// vuex
const store = useStore()
const menuList = computed(() => store.state.entireMenu)
function handleChangeCheck(list, data) {
  const { checkedKeys, halfCheckedKeys } = data
  permissionList.value = { checkedKeys, halfCheckedKeys }
}
async function editFn(item) {
  // const checked = [
  //   ...item.permissionList.checkedKeys,
  //   ...item.permissionList.halfCheckedKeys
  // ]
  await nextTick()
  console.log(elTreeRef.value)
  // nextTick(() => {
  //   console.log(elTreeRef.value)
  //   // elTreeRef.value.setCheckedKeys(checked)
  // })
}
</script>
<style lang="scss" scoped></style>