Vue 3 как обратиться к компоненту через this.$refs?

Question

[Виктор Л]

Привет, есть такая библиотека компонентов Element Plus Откуда я взял компонент Tree, получить выбранные значения из которого можно используя this.$refs.tree.getCheckedKeys- судя по документации, но как это использовать в 3 версии с Composition API?

<template>
  <div class="md:col-span-1">
    <el-tree
        empty-text="Пусто"
        class="filter-tree"
        :data="rubricator"
        :props="defaultProps"
        default-expand-all
        highlight-current
        show-checkbox
        node-key="id"
        :filter-node-method="filterNode"
        ref="tree"      
        @check="getCheckedNodes"
    >
    </el-tree>
  </div>
</template>

<script>
import { ref, onMounted, computed } from 'vue'
import { useMainStore } from '../store'

export default {
  name:"RubricsTree",
  setup () {
    const tree = ref(null)
    const defaultProps = ref ({
      id: "id",
      children: "sub",
      label: "text",
    })
    onMounted(() => {
      console.log(tree);
    });
    const main = useMainStore()
    return {
      defaultProps,
      rubricator: computed(() => main.getRubrics),
    }  
  }
}
</script>

Answer 1

[0xD34F]

const tree = ref(null)

Начало уже есть, хорошо. Теперь надо этот tree вернуть из setup'а, чтобы им можно было пользоваться в шаблоне:

return {
  tree,
  ...

<el-tree
  ref="tree"
  ...

Ну а когда захотите получить выбранные значения - tree.value.getCheckedKeys().

Comments

[Виктор Л]

Да, спасибо ларчик открывался просто