Vue + nested components created

Question

Is there a way to create nested components in vue.js?

<newform>
    <field></field>
    <field></field>
    <field></field>
    <field></field>
    <submit></submit>
</newform>

In my case, only the newform component is rendered, but not the nested components.

My Code:

app.js

Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('#token').getAttribute('value');
Vue.config.debug = true;
Vue.config.async = true;
 
/**
 * The base Vue Instance
 */
new Vue({
    el: '#app',
    components: {
        'new-form': require('./components/form')
    }
});

form.js

module.exports = {
    template: "Hallo Welt",     
    props: ['url', 'method'],    
    components: {
        'field': require('./field')
    },    
    created: function() {
        console.log("Form Component created");
    }
}

field.js

module.exports = {    
    template: 'Ein Text feld',    
    props: ['name', 'type'],   
    create: function() {
        console.log("Field Component created");
    }
}

Link to code sample

Can you add the actual DOM that does get rendered? Also, the "create" function on field.js should be "created". — David K. Hess
– David K. Hess, Commented Jun 30, 2015 at 0:26

tony19 · Accepted Answer · 2022-07-15 20:57:52Z

4

The functionality you are describing is called a slot in Vue. It allows you to nest content inside a component you're including by using a special <slot> tag in its template. Here's an example.

Looking at that link, it's important to note the components aren't in the parent-child relationship you're trying to imply. Your form doesn't need to specify field under its components. It has a slot and it doesn't care what will show up in it.

Both form and field should be specified under components in your app.js, that's where all the heavy lifting is done and that's where both components are included.

edited Jul 15, 2022 at 20:57

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 14, 2017 at 16:47

mzgajner

2,3481 gold badge17 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

swift · Accepted Answer · 2015-07-23 18:09:20Z

0

You can use components, like this: http://jsfiddle.net/hajkrupo/5/

<body>
    <encapsulated-component inline-template>
        <header>
            <cart-status></cart-status>
        </header>
        <cart></cart>
        <item some-prop="1"></item>
        <item some-prop="2"></item>
        <item some-prop="3"></item>
    </encapsulated-component>
</body>

edited Jul 23, 2015 at 18:09

answered Jul 23, 2015 at 14:59

swift

1,1087 silver badges9 bronze badges

Comments

Erguotou · Accepted Answer · 2016-03-31 03:15:44Z

0

You want to render <field> in <newform>, so you need to show the field template in newform template. Like this

form.js

module.exports = {    
  template: 'Ein Text feld<slot></slot>',    
  props: ['name', 'type'],   
  create: function() {
    console.log("Field Component created");
  }
}

Another point is to require field.js in app.js not form.js.

Here is the example http://www.webpackbin.com/4k9vxYrCl.

Hopes to help you.

answered Mar 31, 2016 at 3:15

Erguotou

2153 silver badges9 bronze badges

Collectives™ on Stack Overflow

Vue + nested components created

My Code:

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

My Code:

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related