vue3与vue2一些写法变化 + el-tree反选树形结构高亮展示

vue2的this.$router.push在vue3中的写法：

import { useRouter } from 'vue-router';
export default {
  components: { pagination },
  setup() {
    const router = useRouter();
    const handleEdit = (val) => {
       router.push({
         path: '/homeEdit',
         query: {
           id: val.id
         }
       });
    };
    return {
      handleEdit,
    };
  }

vue2的emit 、mounted在vue3中的用法，el-tree反选树形结构高亮展示

//父组件
 <div class="view-tree">
     <depart-tree :treeData="treeData" @handleClick="handleClick"></depart-tree>
 </div>
import departTree from "./components/departTree.vue";
export default {
  components: { departTree },
  setup() {
    const data = reactive({
        treeData: [],
     });
    const handleClick = (data) => {
      // console.log(data, "data");
    };
    return {
      handleClick, 
    };
   }, 
};

 

//子组件 
<div class="tree-box">
    <h1 class="view-tree-title">部门架构</h1>
    <el-tree
      :data="treeData"
      :props="defaultProps"
      node-key="id"
      ref="tree"
      :highlight-current="true"
      @node-click="handleNodeClick"
    >
    </el-tree>
  </div>
import { onMounted, ref, reactive, toRefs } from "vue";
export default {
  props: {
    treeData: Array,
  },
  emits: ["handleTreeClick"], //vue3中emit引用  
  setup(props, { emit }) {  //vue3中emit引用  
    const tree = ref(null);  //vue3中this.$refs的用法
    const data = reactive({
      defaultProps: {
        children: "children",
        label: "name",
        value: "id",
      },
    });
   //vue3中mounted写法
    onMounted(() => {
      let kindChoose = sessionStorage.getItem("kindChoose");
      if (kindChoose || kindChoose != null) {
        tree.value.setCurrentKey(kindChoose); //反选树形结构高亮展示
      } else {
        tree.value.setCurrentKey();
      }
    });
    const handleNodeClick = (data) => {
      emit("handleClick", data);  //vue3中emit写法
      sessionStorage.setItem("kindChoose", data.id);
    };
    return {
      tree,
      ...toRefs(data),
      onMounted, 
      handleNodeClick,
    };
  },
};