javascript - type - vuejs
Vue+componentes anidados creados (3)
Desea representar <field> en <newform> , por lo que debe mostrar la plantilla de field en la plantilla newform . Me gusta esto
form.js
module.exports = {
template: ''Ein Text feld<slot></slot>'',
props: [''name'', ''type''],
create: function() {
console.log("Field Component created");
}
}
Otro punto es requerir field.js en app.js no form.js
Aquí está el ejemplo http://www.webpackbin.com/4k9vxYrCl .
Espera ayudarte
Hola chicos, ¿hay alguna manera de crear componentes anidados en vue.js?
<newform>
<field></field>
<field></field>
<field></field>
<field></field>
<submit></submit>
</newform>
En mi caso, solo se representa el componente newform, pero no los componentes anidados.
Mi código:
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");
}
}
La funcionalidad que está describiendo se llama ranura en Vue. Le permite anidar contenido dentro de un componente que está incluyendo usando una etiqueta especial <slot> en su plantilla. Aquí hay un ejemplo .
Al mirar ese enlace, es importante tener en cuenta que los componentes no están en la relación padre-hijo que intentas implicar. Su form no necesita especificar el field bajo sus componentes. Tiene una ranura y no le importa lo que aparecerá en ella.
Tanto la form como el field deben especificar bajo componentes en su app.js , ahí es donde se realiza todo el trabajo pesado y ahí es donde se incluyen ambos componentes.
Puede usar componentes como este: 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>