Vuejs：如何在组件1的模板中使用组件2答案

【问题标题】：Vuejs: how to use component 2 in template of component 1Vuejs：如何在组件1的模板中使用组件2
【发布时间】：2020-07-10 22:38:29
【问题描述】：

我是 Vue 的新手，不知道如何在另一个组件的模板中使用一个组件。或者在其他情况下，我如何在 html 中组合组件，使它们嵌套或其他。无法从文档和 SO 中弄清楚。

我还在通过 cdnjs 使用 vue。

例如：

我有一个根 vue 实例#app。在其中我注册了两个数据数组：一个用于容器，另一个用于其中的表。

现在在 html 中我有一个容器，即在它里面我想要一个位于 '' 特定位置的表，我该如何实现它？如果我把它直接放在''组件表中，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”未在实例上定义，但在渲染期间被引用”。

所以父容器组件可以访问它，而子组件没有并抛出错误。

【问题讨论】：

标签： javascript vue.js

【解决方案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>

【讨论】：

谢谢加布里埃尔。让我将这个逻辑应用到我的项目中，然后回到答案。
嗯，看起来我在这里使用了相同的逻辑，但是如果我在#app Vue 中引用数据，它会显示它尚未注册的错误。查看更新的答案。
您被声明为不正确的 data 和 method 属性。我用正确的声明更新了我的答案。
谢谢加布里埃尔！ ))