Vuejs：如何在組件 1 的模板中使用組件 2

Question

我是 Vue 的新手，不知道如何在另一個組件的模板中使用一個組件。 或者在其他情況下，我如何在 html 中組合組件，使它們嵌套或其他。 無法從文檔和 SO 中弄清楚。

我正在通過 cdnjs 使用 vue。

例如：

我有一個根 vue 實例 #app。 我在其中注冊了兩個數據數組：一個用於容器，另一個用於其中的表。

現在在 html 中，我有一個容器，即在其中我想要一個位於 '<'container'>' 特定位置的表格，我該如何實現？ 如果我把它直接放在 '<'container'>' 組件表中，Vue 不會將其識別為有效並顯示錯誤。

到目前為止，我在這里：

        var app = new Vue({

         el: '#app',
         data: {
         containersList: [{container-object}],
         tablesList: [],
         methods(){}
        },

    let container = Vue.component('container',{
           props: ['item'],
           template: '<div class="container">{{ item.data }}</container></div>

<container v-for="item in containerList> </container>

所以到目前為止，我設法渲染組件，用數據填充它們並使所有組件具有反應性。

我需要用表格填充容器。 然后也許用表格標簽或其他東西填充表格，我該怎么做？

我的邏輯在這里失敗了。

let tableComponent = Vue.component('table-component', {
   props: ['item'],
   template: '<div class="table"></div>'
}
let container = Vue.component('container',{
   props: ['item'],
   template: '<div class="container"><table-component></table-component></div>

UPD：所以它看起來像這里提供的那樣呈現，但顯示引用數據中的“tablesList”數組的錯誤。 由於某種原因，它無法訪問它並顯示“屬性或方法“tablesList”未在實例上定義，但在渲染過程中被引用”。

所以父容器組件可以訪問它，而子組件不能訪問它並拋出錯誤。

Answer 1

我在你的代碼中修復了一些東西，我構建了一個最小的例子。

請參閱下面的代碼：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <container></container>
    </div>
    <script>
      let tableComponent = Vue.component("table-component", {
        props: ["item"],
        template: '<div class="table">table-component</div>'
      });

      let container = Vue.component("container", {
        props: ["item"],
        template: `<div class="container">
            <div>container</div>
            <table-component></table-component>
          </div>`
      });

      let app = new Vue({
        el: "#app",
        data() {
          return {
            containersList: [],
            tablesList: []
          };
        },
        methods: {
          anyMethod() {
            console.log("teste");
          }
        }
      });
    </script>
  </body>
</html>

Vuejs：如何在組件 1 的模板中使用組件 2

問題描述

1 個解決方案

解決方案1
1 已采納 2020-03-30 14:40:00

Vuejs：如何在組件 1 的模板中使用組件 2

問題描述

1 個解決方案

解決方案1 1 已采納 2020-03-30 14:40:00

解決方案1
1 已采納 2020-03-30 14:40:00