Vue.js でコンポーネント間の循環参照を実装する方法

コンポーネントは、Vue.js の最も強力な機能の 1 つです。 コンポーネントは HTML 要素を拡張し、再利用可能なコードをカプセル化できます。以下の記事では、Vue.js コンポーネント間の循環参照に関する関連情報を中心に、サンプルコードを通じて詳しく紹介しています。

コンポーネントとは:

コンポーネントが Vue.js の最も強力な機能の 1 つであることは誰もが知っています。コンポーネントは HTML 要素を拡張し、再利用可能なコードをカプセル化できます。大まかに言うと、コンポーネントは、Vue.js のコンパイラーが特別な機能を追加するカスタム要素です。場合によっては、コンポーネントは、 is 属性で拡張されたネイティブ HTML 要素の形式にすることもできます。以下では特に言うことはありませんが、この記事の本文を見てみましょう。

はじめに

私は大小さまざまな Vue ベースのプロジェクトを書いてきましたが、コンポーネントの循環参照の知識を基本的に使ったことはありません。

欠陥がないか確認するには、公式ドキュメントに従ってデモを作成します: コンポーネント間の循環参照

私の実行バージョンは vue-cli@2.8.1 です。プロジェクトを有効にした後、次の js ファイルと vue ファイルを配置します。実行する対応するディレクトリ。

main.js

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

main.jsは、Appコンポーネントをインポートし、コンポーネントにAppコンポーネントを登録します。

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>

AppコンポーネントはTreeFolderコンポーネントをインポートし、TreeFolderコンポーネントをコンポーネントに登録します。

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>

TreeFolder コンポーネントは、TreeFolderContents コンポーネントをインポートし、TreeFolderContents コンポーネントをコンポーネントに登録します。

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>

TreeFolderContents コンポーネントは、TreeFolder コンポーネントをインポートし、TreeFolder コンポーネントをコンポーネントに登録するため、循環参照が発生します。

上記は私があなたのためにまとめたものです。

関連記事:

Node.jsで小さなプログラムバックグラウンドサービスを構築する方法

jsでのファイル読み込みの最適化に関連する問題

nodejs+mongodb+vueを使用してueditorを設定する方法

以上がVue.js でコンポーネント間の循環参照を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。