Comment implémenter des références circulaires entre les composants dans Vue.js

Le composant est l'une des fonctionnalités les plus puissantes de Vue.js. Les composants peuvent étendre des éléments HTML et encapsuler du code réutilisable. L'article suivant vous présente principalement les informations pertinentes sur les références circulaires entre les composants Vue.js. L'article les présente en détail à travers un exemple de code. Les amis dans le besoin peuvent s'y référer.

Qu'est-ce qu'un composant :

Comme nous le savons tous, les composants sont l'une des fonctionnalités les plus puissantes de Vue.js. Les composants peuvent étendre des éléments HTML et encapsuler du code réutilisable. À un niveau élevé, un composant est un élément personnalisé auquel le compilateur de Vue.js ajoute des fonctionnalités spéciales. Dans certains cas, les composants peuvent également se présenter sous la forme d'éléments HTML natifs, étendus avec l'attribut is. Pas grand chose à dire ci-dessous, jetons un œil au texte principal de cet article.

Introduction

J'ai écrit de nombreux grands et petits projets basés sur Vue, mais je n'ai pratiquement jamais utilisé la connaissance des références circulaires de composants.

Afin de vérifier les lacunes, j'ai suivi la documentation officielle pour créer une DEMO : références circulaires entre les composants

Ma version en cours d'exécution est vue-cli@2.8.1. Après avoir activé le projet, ajoutez les fichiers js suivants et les fichiers vue sont placés dans les répertoires correspondants et exécutés.

main.js

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

main.js importe le composant App et enregistre le composant App dans les composants.

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>

Le composant d'application importe le composant TreeFolder et enregistre le composant TreeFolder dans les composants.

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>

Le composant TreeFolder importe le composant TreeFolderContents et enregistre le composant TreeFolderContents dans les composants.

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>

Le composant TreeFolderContents importe le composant TreeFolder et enregistre le composant TreeFolder dans les composants , ce qui donne une référence circulaire.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comment créer un service d'arrière-plan pour petit programme dans Node.js

À propos de l'optimisation du chargement de fichiers dans js Question

Comment configurer ueditor

en utilisant nodejs+mongodb+vue

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!