Detaillierte Erklärung zur Verwendung selbstverschachtelter Vue-Baumkomponenten

<Vorlage>
  <ul v-show="isShow" ref="Benutzerbaum">
    <li v-for="(item, idx) in Benutzerliste" :key="idx">
      <div>
        <!-- Mehrfachauswahl des Benutzerbaums -->
        <Eingabe
          Klasse="primär"
          Typ="Kontrollkästchen"
          v-Modell="Benutzer auswählen1"
          :Wert="Artikel.Benutzer-ID"
          v-show="istCheck"
        />
        <!-- Einzelauswahl-Benutzerbaum -->
        <span
          @click="beiAuswahl(Element)"
          :Stil="{
            Farbe: selectUser1 == item.userId ? 'rot' : '',
            Cursor: 'Zeiger',
          }"
        >
          <i class="iconfont icon-user"></i> {{ item.userName }}</span
        >
        <!-- Benutzerbaum erweitern -->
        <i
          Klasse = "Iconfont-Symbol rechts"
          v-if="Artikel.habeKind"
          @click="expandItem(idx)"
        ></i>
      </div>
      <!-- Verschachtelter Benutzerbaum -->
      <Benutzerbaum
        :Benutzer-ID="Artikel.Benutzer-ID"
        v-if="Artikel.habeKind"
        :is-show.sync="item.isShow"
        :select-user.sync="Benutzer1 auswählen"
        :select-users.sync="Benutzer auswählen1"
        :is-check="istCheck"
      ></Benutzerbaum>
    </li>
  </ul>
</Vorlage>

<Skript> 
Standard exportieren {
  Name: "user-tree", //Definiert als Komponentenname, andernfalls wird bei der Selbstverschachtelung ein Fehler gemeldet, dass die Komponente selbst nicht registriert ist. Eigenschaften: {
    isShow: {//Ob die Benutzerliste erweitert werden soll, Typ: Boolean,
      Standard: false
    },
    userId: {//Aktuelle übergeordnete ID des Benutzerbaums
      Typ: Nummer,
      Standard: 0
    },
    selectUser: {//Aktuell ausgewählte Benutzer-ID
      Typ: Nummer,
      Standard: 0
    },
    selectUsers: {//Mehrfachauswahl Benutzertyp: Array,
      Standard: Funktion () {
        zurückkehren [];
      }
    },
    isCheck: {//Ob mehrere Optionen ausgewählt werden sollen Typ: Boolean,
      Standard: false
    }
  },

  Daten: () => ({
    userList: [], //Benutzerliste selectUser1: 1, //Einzelauswahl von Benutzern selectUsers1: [], //Mehrfachauswahl von Benutzern isLoad: true
  }),
  betrachten:
    selectUser1 () {//Einzelauswahl des Benutzers, aktuelle Ebene mit übergeordneter Ebene synchronisiertif (this.selectUser1 != this.selectUser) {
        dies.$emit("update:select-user", dies.selectUser1);
      }
    },
    selectUser () {//Einzelauswahl des Benutzers, aktuelle Ebene wird mit übergeordneter Ebene synchronisiertif (this.selectUser1 != this.selectUser) {
        dies.selectUser1 = dies.selectUser;
      }
    },
    selectUsers1 () {//Mehrfachauswahl, aktuelle Ebene mit übergeordneter Ebene synchronisiertif (this.selectUsers1 != this.selectUsers) {
        dies.$emit("update:select-users", dies.selectUsers1);

      }
    },
    selectUsers () {//Mehrfachauswahl, aktuelle Ebene mit übergeordneter Ebene synchronisiertif (this.selectUsers1 != this.selectUsers) {
        dies.selectUsers1 = dies.selectUsers;
      }
    },
    istAnzeigen() {
      wenn (dies.istAnzeigen) {
        dies.getUserList();
      }
    }
  },
  Methoden: {
    onSelect (item) {//Einzelauswahl Benutzer this.$emit("update:select-user", item.userId);

    },

    expandItem (idx) {//Benutzerbaum erweitern if (this.userList[idx].isShow) {
        diese.Benutzerliste[idx].isShow = false;
      } anders {
        diese.Benutzerliste[idx].isShow = true;
      }

    },
    getUserList () {
      var Liste = [];
      für (var i = 0; i < 10; i++) {
        var Benutzer-ID = Math.round(Math.random() * 10000);
        Liste.push({
          Benutzer-ID: Benutzer-ID,
          Benutzername: "Benutzer-" + Benutzer-ID,
          haveChild: i % 2, //Ob ein Teilbaum vorhanden ist isShow: false //Ob der Teilbaum angezeigt werden soll });
      }
      diese.Benutzerliste = Liste;


    },

  },
  montiert () {

    if (this.userId == 1) {//Die aktuelle übergeordnete Benutzer-ID ist die Stammbenutzer-ID, also laden und erweitern Sie den Benutzerbaum this.getUserList(this.userId);
    }
  }
};
</Skript>

<div>{{ Benutzer auswählen }}</div>
    <div>
      <span v-for="item in selectUsers" :key="item">【{{ item }}】</span>
    </div>
    <Benutzerbaum
      :Benutzer-ID="1"
      :ist-show="wahr"
      :select-user.sync="Benutzer auswählen"
      :select-users.sync="Benutzer auswählen"
      :ist-check="true"
></Benutzerbaum>