0

¿Como puedo colocar un elementos dentro de otro elemento, creado por la función component de Vuejs? Tengo mi código creado con el template de Vuejs, pero quiero crear elementos dentro de otros elementos, pero me da error y no muestra nada. Digamos quiero poder hacer algo asi:

<div id="app">
<my-element id="element" v-for="data in 1000">
         <my-child id="child">{{ data }}</my-child>
</my-element>
</div>

Y este es mi script de Vuejs:

new Vue({
  el: '#app',
  componentes: {
    my-element: {
      props: {
        id: ''
      },
      template: '<div class="content"></div>'
    },
    my-child: {
      props: {
        id: ''
      },
    template: '<div class="child"></div>
    }
  }
});

La pagina oficial de este template esta aquí, esta basado en javascript.

3 respuestas 3

3

Recuerda siempre revisar la documentación oficial, aquí te dejo algo que puede serte de utilidad. https://v2.vuejs.org/v2/guide/components.html#Scoped-Slots

Un scoped slot es un tipo especial de slot que funciona como un template reutilizable (al cual se le puede pasar data) en lugar de already-rendered-elements. En un componente hijo, puedes pasar data dentro de un slot como si pasarás props a un componente:

<div class="child">
  <slot text="hello from child"></slot>
</div>

En el componente padre, debe exisitr un elemento <template> con un atributo especial slot-scope, indicando que es una plantilla para un scoped slot. El valor del slot-scope se usará como nombre de una variable temporal que contiene el objeto props pasado del componente hijo:

<div class="parent">
  <child>
    <template slot-scope="props">
      <span>hello from parent</span>
      <span>{{ props.text }}</span>
    </template>
  </child>
</div>

Una vez compilado se verá así:

<div class="parent">
  <div class="child">
    <span>hello from parent</span>
    <span>hello from child</span>
  </div>
</div>
1

my-child debe de ir dentro de my-element

components: {
  'my-element': {
    props: {
      id: ''
    },
    template: '<div class="content"></div>',
    components: {
      'my-child': { ....
    }
  }
}
1

Si no quieres utilizar slot, recomiendo que utilices un archivo html como template y no la etiqueta template yo tuve ese problema.

template: require('./companies.html'),
props:{
}...

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.