Geek Answers Handbook

Vue + Nested Components Created

Hi guys, 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 is:

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 sample code

+4
source share
3 answers

The functionality that you describe is called slot in Vue. This allows you to embed content inside the component that you include using a special tag <slot>in your template. Here is an example .

, , , . form field . , , .

form field app.js, , .

+3

, : 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>
0

<field> <newform>, field newform.

form.js

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

field.js app.js form.js.

http://www.webpackbin.com/4k9vxYrCl.

.

0

More articles:


All Articles