[Vuejs]-Vuejs: how to use component 2 in template of component 1

by

1👍

✅

I fixed something in your code and I build a minimal example.

See the code below:

<!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>
👤Gabriel Willemann

Leave a comment