2

Estoy iniciando en Vue Js y me gustaría algo de orientación si es posible, quiero saber si es posible importar un componente dentro de otro, hasta donde eh visto si es posible, pero no logro hacerlo.

Los pasos de instalación de Vue Js que realicé son los siguientes:

# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm install
$ npm run dev

Estoy trabajando con Webpack siguiendo los pasos de la documentación.

Agregue el repositorio en GitHub para que lo puedan ver y mirar que estoy haciendo mal, de igual forma dejo el código a continuación:

HelloWorld.vue:

<template>
    <div class="row">
        <div class="col-md-12">
            <h1>{{ msg }}</h1>
            <hr/>
        </div>
        <my-component></my-component>
    </div>
</template>

<script>
    import Paises from '@/components/Paises'

    export default {
        name: 'HelloWorld',
        component:{
            'my-component': Paises
        },
        data () {
            return {
                msg: 'Example of components with Vue.js App'
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Paises.vue:

<template>
    <div class="row">
        <div class="col-md-12">
            <h1>{{ msg_paises }}</h1>
            <hr/>
            Test
        </div>
    </div>
</template>

<script>
export default {
  name: 'Paises',
  data () {
    return {
      msg_paises: 'Component #1'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

El error que me marca la consola dice:

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> at src\components\HelloWorld.vue at src\App.vue

El mensaje de error considero que es claro pero sigo sin identificar que tendria que hacer entonces.

Revise la Documentación de componentes y también este ejemplo pero no doy para lograrlo.

3
  • Para registrar un componente localmente debes usar components en vez de component. vuejs.org/v2/guide/components.html#Local-Registration Commented el 10 ene. 2018 a las 21:25
  • -_-! Gracias @JoseHermosillaRodrigo pequeños detalles que se le pasan a uno cuando se esta aprendiendo, una ultima consulta, podrías decirme como enviar información a dicho componente, también ponlo como respuesta para calificarla ya que funciono.
    – Andrés
    Commented el 10 ene. 2018 a las 21:32
  • 1
    a lo ultimo de enviar información ya no hace falta ya pude con props.
    – Andrés
    Commented el 10 ene. 2018 a las 21:33

1 respuesta 1

2

Debes registrar tu componente desde la propiedad components:

const ComponenteHijo = {
  template: '<p>Soy el Hijo</p>'
}

new Vue({
  el: '#app',
  components: {
    ComponenteHijo
  },
  template: '<componente-hijo></componente-hijo>'
})
<script src="https://vuejs.org/js/vue.js"></script>
<div id="app"></div>

DOC

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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