Heim Web-Frontend js-Tutorial So implementieren Sie Zirkelverweise zwischen Komponenten in Vue.js

So implementieren Sie Zirkelverweise zwischen Komponenten in Vue.js

Jun 15, 2018 am 11:32 AM
vue 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 }
})
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Repo: Wie man Teamkollegen wiederbelebt
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So verwenden Sie Echarts in Vue So verwenden Sie Echarts in Vue May 09, 2024 pm 04:24 PM

So verwenden Sie Echarts in Vue

Die Rolle des Exportstandards in Vue Die Rolle des Exportstandards in Vue May 09, 2024 pm 06:48 PM

Die Rolle des Exportstandards in Vue

So verwenden Sie die Kartenfunktion in Vue So verwenden Sie die Kartenfunktion in Vue May 09, 2024 pm 06:54 PM

So verwenden Sie die Kartenfunktion in Vue

Der Unterschied zwischen Event und $event in Vue Der Unterschied zwischen Event und $event in Vue May 08, 2024 pm 04:42 PM

Der Unterschied zwischen Event und $event in Vue

Die Rolle von Onmount in Vue Die Rolle von Onmount in Vue May 09, 2024 pm 02:51 PM

Die Rolle von Onmount in Vue

Der Unterschied zwischen Export und Exportstandard in Vue Der Unterschied zwischen Export und Exportstandard in Vue May 08, 2024 pm 05:27 PM

Der Unterschied zwischen Export und Exportstandard in Vue

Was sind Hooks in Vue Was sind Hooks in Vue May 09, 2024 pm 06:33 PM

Was sind Hooks in Vue

Onmount in Vue entspricht dem Lebenszyklus der Reaktion Onmount in Vue entspricht dem Lebenszyklus der Reaktion May 09, 2024 pm 01:42 PM

Onmount in Vue entspricht dem Lebenszyklus der Reaktion

See all articles