So implementieren Sie Zirkelverweise zwischen Komponenten in Vue.js

Komponente ist eine der leistungsstärksten Funktionen von Vue.js. Komponenten können HTML-Elemente erweitern und wiederverwendbaren Code kapseln. Der folgende Artikel führt Sie hauptsächlich in die relevanten Informationen zu Zirkelverweisen zwischen Vue.js-Komponenten ein. Der Artikel stellt sie anhand von Beispielcodes detailliert vor.

Was ist eine Komponente:

Wie wir alle wissen, sind Komponenten eine der leistungsstärksten Funktionen von Vue.js. Komponenten können HTML-Elemente erweitern und wiederverwendbaren Code kapseln. Auf einer hohen Ebene ist eine Komponente ein benutzerdefiniertes Element, dem der Compiler von Vue.js spezielle Funktionen hinzufügt. Teilweise können Komponenten auch in Form von nativen HTML-Elementen vorliegen, erweitert um das Attribut is. Im Folgenden gibt es nicht viel zu sagen. Werfen wir einen Blick auf den Haupttext dieses Artikels.

Einführung

Ich habe viele große und kleine Vue-basierte Projekte geschrieben, aber das Wissen über Komponenten-Zirkelverweise habe ich grundsätzlich nie genutzt.

Um auf Mängel zu prüfen, habe ich eine DEMO gemäß der offiziellen Dokumentation erstellt: Zirkelverweise zwischen Komponenten

Meine laufende Version ist vue-cli@2.8.1. Nach der Aktivierung des Projekts, Fügen Sie die folgenden js-Dateien hinzu und vue-Dateien werden in den entsprechenden Verzeichnissen abgelegt und ausgeführt.

main.js

import Vue from 'vue'
import App from './App'
new Vue({
 el: '#app',
 template: &#39;<App/>&#39;,
 components: { App }
})

main.js importiert die App-Komponente und registriert die App-Komponente in Komponenten.

App.vue

<template>
 <p id="app">
 <li v-for="folder in folders">
 <tree-folder v-bind:folder="folder"></tree-folder>
 </li>
 </p>
</template>
<script>
 import TreeFolder from &#39;./components/tree-folder&#39;
 export default {
 data: function () {
 return {
 folders: [
  {
  name: &#39;folder1&#39;,
  children: [{
  name: &#39;folder1 - folder1&#39;,
  children: [{
  name: &#39;folder1 - folder1 - folder1&#39;
  }]
  }, {
  name: &#39;folder1 - folder2&#39;,
  children: [{
  name: &#39;folder1 - folder2 - folder1&#39;
  }, {
  name: &#39;folder1 - folder2 - folder2&#39;
  }]
  }]
  },
  {
  name: &#39;folder 2&#39;,
  children: [{
  name: &#39;folder2 - folder1&#39;,
  children: [{
  name: &#39;folder2 - folder1 - folder1&#39;
  }]
  }, {
  name: &#39;folder2 - folder2&#39;,
  children: [{
  name: &#39;folder2-content1&#39;
  }]
  }]
  },
  {
  name: &#39;folder 3&#39;,
  children: [{
  name: &#39;folder3 - folder1&#39;,
  children: [{
  name: &#39;folder3 - folder1 - folder1&#39;
  }]
  }, {
  name: &#39;folder3 - folder2&#39;,
  children: [{
  name: &#39;folder3-content1&#39;
  }]
  }]
  }
 ]
 }
 },
 components: {
 TreeFolder
 }
 }
</script>

Die App-Komponente importiert die TreeFolder-Komponente und registriert die TreeFolder-Komponente in Komponenten.

components/tree-folder.vue

<template>
 <p>
 <span>{{ folder.name }}</span>
 <tree-folder-contents :children="folder.children"></tree-folder-contents>
 </p>
</template>
<script>
 // 官方文档：「在我们的例子中，将 tree-folder 组件做为切入起点。我们知道制造矛盾的是 tree-folder-contents 子组件，所以我们在 tree-folder 组件的生命周期钩子函数 beforeCreate 中去注册 tree-folder-contents 组件」
 export default {
 props: [&#39;folder&#39;],
 data: function () {
  return {}
 },
 beforeCreate: function () {
 // 官方文档给出的是require
 // this.$options.components.TreeFolderContents = require(&#39;./tree-folder-contents.vue&#39;)
 // 在基于vue-cli@2.8.1按照上面的写法还是会报错
 // Failed to mount component: template or render function not defined.
 // 所以我们应该改为基于es6的写法异步加载一个组件如下
  this.$options.components.TreeFolderContents = () => import(&#39;./tree-folder-contents.vue&#39;)
 }
 }
</script>

Die TreeFolder-Komponente importiert die TreeFolderContents-Komponente und registriert die TreeFolderContents-Komponente in Komponenten.

components/tree-folder-contents.vue

<template>
 <ul>
 <li v-for="child in children">
  <tree-folder v-if="child.children" :folder="child"></tree-folder>
  <span v-else>{{ child.name }}</span>
 </li>
 </ul>
</template>
<script>
 import TreeFolder from &#39;./tree-folder&#39;
 export default {
 props: [&#39;children&#39;],
 components: {
  TreeFolder
 }
 }
</script>

Die TreeFolderContents-Komponente importiert die TreeFolder-Komponente und registriert die TreeFolder-Komponente in zu generierenden Komponenten Ein Zirkelverweis.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

So erstellen Sie einen kleinen Programmhintergrunddienst in Node.js

Informationen zur Dateiladeoptimierung in js Frage

So konfigurieren Sie ueditor

mit nodejs+mongodb+vue

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Zirkelverweise zwischen Komponenten in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!