Vueの自己ネストツリーコンポーネントの使い方の詳細な説明

<テンプレート>
  <ul v-show="isShow" ref="ユーザーツリー">
    <li v-for="(item, idx) in userList" :key="idx​​">
      <div>
        <!-- 複数選択ユーザーツリー -->
        <入力
          クラス="プライマリ"
          タイプ="チェックボックス"
          v-model="selectUsers1"
          :value="item.userId"
          v-show="isCheck"
        />
        <!-- 単一選択ユーザーツリー -->
        <span
          @click="onSelect(アイテム)"
          :style="{
            色: selectUser1 == item.userId ? '赤' : '',
            カーソル: 'ポインタ',
          }"
        >
          <i class="iconfont icon-user"></i> {{ item.userName }}</span
        >
        <!-- ユーザーツリーを展開します -->
        <i
          クラス="iconfont icon-right"
          v-if="item.haveChild"
          @click="アイテムを展開(idx)"
        </i>
      </div>
      <!-- ネストされたユーザーツリー -->
      <ユーザーツリー
        :user-id="item.userId"
        v-if="item.haveChild"
        :is-show.sync="item.isShow"
        :select-user.sync="selectUser1"
        :select-users.sync="selectUsers1"
        :is-check="isCheck"
      </ユーザーツリー>
    </li>
  </ul>
</テンプレート>

<スクリプト> 
エクスポートデフォルト{
  name: "user-tree", // コンポーネント名として定義されます。そうでない場合、自己ネストにより、コンポーネント自体が登録されていないというエラーが報告されます。props: {
    isShow:{//ユーザーリストを展開するかどうか type: ブール値、
      デフォルト: false
    },
    userId:{//現在のユーザーツリーの親ID
      タイプ: 数値、
      デフォルト: 0
    },
    selectUser:{//現在選択されているユーザーID
      タイプ: 数値、
      デフォルト: 0
    },
    selectUsers:{//複数選択ユーザータイプ: 配列、
      デフォルト: 関数() {
        戻る [];
      }
    },
    isCheck:{// 複数のオプションを選択するかどうか type: ブール値、
      デフォルト: false
    }
  },

  データ: () => ({
    userList: [], //ユーザーリスト selectUser1: 1, //ユーザーの単一選択 selectUsers1: [], //ユーザーの複数選択 isLoad: true
  }）、
  時計：
    selectUser1 (){// ユーザーを単一選択、現在のレベルは親レベルに同期if (this.selectUser1 != this.selectUser) {
        this.$emit("update:select-user", this.selectUser1);
      }
    },
    selectUser(){// ユーザーの単一選択、現在のレベルは親レベルと同期されますif (this.selectUser1 != this.selectUser) {
        this.selectUser1 = this.selectUser;
      }
    },
    selectUsers1 (){//複数選択、現在のレベルは親レベルに同期if (this.selectUsers1 != this.selectUsers) {
        this.$emit("update:select-users", this.selectUsers1);

      }
    },
    selectUsers (){//複数選択、現在のレベルは親レベルと同期if (this.selectUsers1 != this.selectUsers) {
        this.selectUsers1 = this.selectUsers;
      }
    },
    isShow() {
      if (this.isShow) {
        ユーザーリストを取得します。
      }
    }
  },
  メソッド: {
    onSelect (item){// 単一選択ユーザー this.$emit("update:select-user", item.userId);

    },

    expandItem (idx){//ユーザーツリーを展開します if (this.userList[idx].isShow) {
        this.userList[idx].isShow = false;
      } それ以外 {
        this.userList[idx].isShow = true;
      }

    },
    ユーザーリストを取得する() {
      var リスト = [];
      (var i = 0; i < 10; i++) の場合 {
        var userId = Math.round(Math.random() * 10000);
        リスト.push({
          ユーザーID: ユーザーID、
          ユーザー名: "user-" + ユーザーID、
          haveChild: i % 2, //サブツリーがあるかどうか isShow: false //サブツリーを表示するかどうか });
      }
      this.userList = リスト;


    },

  },
  マウントされた（）{

    if (this.userId == 1){//現在の親 userId はルート ユーザー ID なので、ユーザー ツリーを読み込んで展開します this.getUserList(this.userId);
    }
  }
};
</スクリプト>

<div>{{ selectUser }}</div>
    <div>
      <span v-for="item in selectUsers" :key="item">【{{ item }}】</span>
    </div>
    <ユーザーツリー
      :ユーザーID="1"
      :is-show="true"
      :select-user.sync="ユーザーを選択"
      :select-users.sync="ユーザーを選択"
      :is-check="true"
</ユーザーツリー>