Bagaimana untuk menggunakan komponen rekursif dalam Vue?

Vue ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini. Ia mudah digunakan dan sangat fleksibel. Dalam Vue, komponen rekursif ialah teknologi yang sangat berguna yang boleh membantu kami menggunakan komponen dalam komponen dan mengelakkan masalah menghantar data antara komponen.

Sekarang, mari kita lihat dengan lebih dekat cara menggunakan komponen rekursif dalam Vue.

1. Apakah komponen rekursif?

Pertama sekali, kita perlu memahami apa itu komponen rekursif. Komponen rekursif ialah teknik yang membolehkan anda menggunakan semula diri anda berulang kali dalam komponen. Sebagai contoh, mungkin terdapat keperluan sedemikian dalam komponen: kita perlu membentangkan satu set data berstruktur pokok, dan setiap nod dan nod anaknya adalah komponen yang sama. Pada masa ini, kita boleh menggunakan komponen rekursif untuk mencapai ini.

2. Cara menggunakan komponen rekursif

Dalam Vue, terdapat dua cara untuk menggunakan komponen rekursif. Di bawah ini kami perkenalkan satu persatu.

2.1. Gunakan komponen anda sendiri secara langsung

Kami boleh menggunakan diri kami secara langsung dalam templat komponen, dan menghantar data semasa melalui prop untuk membiarkan komponen itu sendiri melakukan rekursi.

Berikut ialah contoh penggunaan komponen rekursif untuk membentangkan struktur pokok:

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      <TreeNode :node="item" :children="item.children" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tree',
  props: {
    list: Array,
  },
  components: {
    TreeNode: {
      name: 'TreeNode',
      props: {
        node: Object,
        children: Array,
      },
      template: `
        <div>
          <div>{{node.title}}</div>
          <Tree v-if="children" :list="children" />
        </div>
      `,
    },
  },
};
</script>

Dalam contoh di atas, kami mencipta komponen Pokok untuk membentangkan data struktur pokok, dan komponen TreeNode ialah komponen rekursif , yang akan memanggil dirinya sendiri apabila diperlukan.

2.2. Gunakan atribut nama

Selain menggunakan komponennya sendiri secara langsung, kita juga boleh menggunakan atribut nama untuk mengelakkan panggilan gelung tak terhingga komponen. Dengan melakukan ini, kami boleh menjadikan cache Vue sebagai contoh untuk setiap komponen, mengelakkan kos pemaparan yang tidak perlu.

Kami boleh menulis teg tersuai dalam templat komponen, dan kemudian menentukan nama teg dalam atribut nama komponen. Ini memerlukan kita membahagikan komponen kepada dua bahagian: satu ialah komponen akar yang ditandakan dengan atribut nama, dan satu lagi ialah komponen anak yang dibentangkan secara rekursif. Dalam komponen anak, apabila kita perlu menggunakan dirinya secara rekursif, kita boleh terus menggunakan nama komponen akar.

Berikut ialah contoh penggunaan komponen rekursif untuk membentangkan struktur pokok Sama seperti contoh di atas, kami menggunakan atribut nama untuk mengelakkan panggilan gelung tak terhingga.

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      <tree-node :node="item" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tree',
  props: {
    list: Array,
  },
  components: {
    TreeNode: {
      name: 'tree-node',
      props: {
        node: Object,
      },
      template: `
        <div>
          <div>{{node.title}}</div>
          <tree v-if="node.children" :list="node.children" />
        </div>
      `,
    },
  },
};
</script>

Dalam contoh di atas, kami mencipta komponen Pokok untuk membentangkan data berstruktur pokok, dan komponen TreeNode menggunakan atribut nama untuk mengelakkan panggilan gelung tak terhingga bagi komponen tersebut.

3. Ringkasan

Di atas, kami memperkenalkan cara menggunakan komponen rekursif dalam Vue. Komponen rekursif ialah teknologi yang sangat fleksibel yang membolehkan kami menghantar data dengan lebih bebas antara komponen. Perlu diingatkan bahawa apabila menggunakan komponen rekursif, anda mesti mengelakkan panggilan gelung tak terhingga dan cuba menggunakan atribut nama untuk mengelakkan situasi ini.

Atas ialah kandungan terperinci Bagaimana untuk menggunakan komponen rekursif dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!