vue组件自引用

<template>
  <q-tr>
    <q-td>
      <q-btn
        dense
        round
        flat
        v-if="menu.children"
        :icon="menu.expand ? 'mdi-minus' : 'mdi-plus'"
        @click="menu.expand = !menu.expand"
      />
    </q-td>
    <q-td>{{ menu.name }}</q-td>
    <q-td>
      <q-icon :name="menu.icon" color="t-grey" />
    </q-td>
    <q-td>{{getDictLabel(menuType,menu.menuType)}}</q-td>
    <q-td class="ellipsis" key="url">
      <div class="text-left" style="white-space: normal;">{{ menu.url }}</div>
    </q-td>
    <q-td class="ellipsis" key="component">{{ menu.component }}</q-td>
    <q-td>{{ menu.sortNo }}</q-td>
    <q-td>
      <div>
        <q-btn flat round dense color="primary" icon="edit" @click.stop="edit(menu)">
          <q-tooltip>编辑</q-tooltip>
        </q-btn>
        <q-btn flat round dense color="primary" icon="add" @click.stop="addChild(menu)">
          <q-tooltip>添加</q-tooltip>
        </q-btn>
        <btn-del label="删除" @confirm="del(menu)" />
      </div>
    </q-td>
  </q-tr>
</template>

<script>
import { getter, formatter, getDictLabel } from 'boot/dictionary';

export default {
  name: 'menu-item',
  components: {},
  props: {
    menu: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      parent: {},
      menuType: formatter('menuType'),
      icons: getter('icon'),
    };
  },
  watch: {},
  computed: {},
  methods: {
    getDictLabel,
    query() {
      this.loading = true;
      this.$axios.get(`${this.url.list}?key=${this.key}`).then((r) => {
        this.list = r.result;
      }).finally(() => {
        this.loading = false;
      });
    },
    reset() {
      this.form = {
        id: '',
        title: '',
        parentId: '',
        icon: '',
        component: '',
        url: '',
        redirect: '',
        sortNo: 100,
        menuType: 0,
        route: true,
        hidden: false,
        perms: '',
        status: '1',
        internalOrExternal: false,
      };
    },
    add() {
      this.editType = '新建';
      this.reset();
      this.$refs.dialog.show();
    },
    addChild(p) {
      this.editType = '新建';
      this.reset();
      this.parent = p;
      this.form.parentId = p.id;
      this.form.menuType = p.menuType + 1;
      this.$refs.dialog.show();
    },
    editBefore(row) {
      this.list.forEach((menu) => {
        if (menu.id === row.parentId) {
          this.parent = menu;
        }
        if (menu.children && menu.children.length > 0) {
          menu.children.forEach((child) => {
            if (child.id === row.parentId) {
              this.parent = child;
            }
          });
        }
      });
      return true;
    },
  },
  created() { },
  mounted() { },
};
</script>
<style lang="stylus"></style>