【无标题】

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

vue中emits的理解

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、emits？

emits可用来父子组件的控制

父组件

<template>
	<DeptTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
</template>
<script lang="ts">
import DeptTree from './DeptTree.vue';
export default defineComponent({
    name: 'AccountManagement',
    components: {DeptTree},
    setup() {
    function handleSelect(deptId = '') {
        要对DeptTree 组件操作的代码
      }
       return {
        handleSelect,
      };
    },
  });
</script>

子组件
子组件中emits位置用来对应父组件中@select所调用的方法

<template>
  <div class="m-4 mr-0 overflow-hidden bg-white">
    <BasicTree
      title="部门列表"
      toolbar
      search
      :clickRowToExpand="false"
      :treeData="treeData"
      :fieldNames="{ key: 'id', title: 'deptName' }"
      @select="handleSelect"
    />
  </div>
</template>
<script lang="ts">
  import { defineComponent, onMounted, ref } from 'vue';

  import { BasicTree, TreeItem } from '/@/components/Tree';
  import { getDeptList } from '/@/api/demo/system';

  export default defineComponent({
    name: 'DeptTree',
    components: { BasicTree },

    emits: ['select'],//此处申明与父组件何处对应
    setup(_, { emit }) { //实例化emit。。。
      const treeData = ref<TreeItem[]>([]);

      async function fetch() {
        treeData.value = (await getDeptList()) as unknown as TreeItem[];
      }

      function handleSelect(keys) { 子组件方法
        emit('select', keys[0]); //调用父组件中申请有方法并传值
      }

      onMounted(() => {
        fetch();
      });
      return { treeData, handleSelect };
    },
  });
</script>

---

总结

vue中emits的理解：总的来说，vue3.0中的emits功能类似于2.0中的props，不过功能更加强大，除了可以传值之外还可以指定调用方法等。