Nested vue.js instances/elements

javascript mvvm vue.js

11,403

Solution 1

Think components. http://vuejs.org/guide/components.html

Create a Vue instance on the body as you have above, but anything nested in that is a component. Pass data via props.

Solution 2

Passing in data via props is only one way to do it. Nesting components and inheriting from the parent works fine as well.

Example: http://jsfiddle.net/hajkrupo/3/

<encapsulated-component inline-template>
    <header>
        <cart-status></cart-status>
    </header>
    <cart></cart>
</encapsulated-component>

Solution 3

You can do this with <slot> tags. Here is an example.

1.So, first, you need to do is creating a basic layout component, like this. You need to add <slot> tag whereever you want. Very important think is the name attribute on <slot> tag.

var basicLayout = Vue.component("basic-layout", {
    template: `

    <div class="basic-layout">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>

    `
});

2.Then create your custom component. I created myHeader component to show you, how it works.

var myHeader = Vue.component("my-header", {
    template: `

    <div class="header">
        <ul>
            <li>HOME</li>
            <li>ABOUT</li>
            <li>CONTACT</li>
        </ul>
    </div>

   `
});

3.Put this sample code in your HTML file. To put some content in current slot, just use the slot attribute in your component or your tag.

<div class="app">
  <basic-layout>
      <my-header slot="header"></my-header>

      <p>Content in &lt;main&gt; tag</p>

      <p slot="footer">Content in footer</p>
  </basic-layout>
</div>

4.The result will be like this:

<div class="app">
    <div class="basic-layout">
        <header>
            <div class="header">
              <ul>
                <li>HOME</li>
                <li>ABOUT</li>
                <li>CONTACT</li>
              </ul>
            </div>
        </header>

        <main>
        <p>Content in &lt;main&gt; tag</p>
        <main>

        <footer>
            <p>Content in footer</p>
        </footer>
    </div>
</div>

Please, see the documentation in official page of Vue.js Just click link here for more info.

Here is example in jsfiddle

11,403

keogh

Updated on September 14, 2022

Comments

keogh over 1 year
This may sound like a real noob question, but I'm pretty new to MVVM... or even MVC in JS, so sorry in advance.

I'm playing about with vue.js, and loving the simplicity of it so far. But for what I am trying to do, I think I need to go about it a different way.

I want to nest Vue instances/elements inside each other, but of course, the parent will then use the child when it reads through the DOM on init.

For the sake of arguments, below is an example of what I mean, I am not doing anything like this, but this is the simplest way to example what I mean:
```
<body>
    {{ message }}
    <div id="another">
        {{ message }}
    </div>
</body>
```
Then my JS for example would be:
```
new Vue({
    el: "body",
    data: {
        message: "I'm the parent"
    }
});

new Vue({
    el: "#another",
    data: {
        message: "I'm the child"
    }
});
```
The outcome would be:
```
<body>
    I'm the parent
    <div id="another">
        I'm the parent
    </div>
</body>
```
Now I completely understand why it is doing this and in fact, it should do this, but my example is just trying to illustrate how I would do something like this?

In my real life project, I have a v-class on my body that changes when stuff happens in the body (in numerous places) but of course my body will also want other instances of vue that do other stuff.

how would I go about nesting? Is there feature in vue to deal with this? Do I need to deal with components? Or maybe, fetch the body from within a child element (e.g. like jQuery would with $("body")) then manipulate it within the Vue instance?

Hope this question isn't too stupid and someone can point me in the right direction.

Thanks
user3224001 almost 6 years

Thank you for mentioning inline-template, solved my problem. thank you!