Import vue.js component

Question

I need import component with data into vue.js app.

I can component registration and I used this code.

Correct Code:

  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    components: {
      'test': {
        template: '<div>msg: {{message}}</div>',
        props: {
          message: {
            type: String,
            required: true
          }
        }
      }
    }
  }

But how can I Local Registration with data?

NOT correct:

import Test from './components/Test.vue';

export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    components: {
      'test': {
        template: Test,
        props: {
          message: {
            type: String,
            required: true
          }
        }
      }
    }
  }

You want a nested component to have its own data property? Just put data along with props, template etc. — Egor Stambakio
– Egor Stambakio, Commented Apr 30, 2017 at 13:38
Basic question first, are you using Webpack to preprocess your app? Because I can't see anything immediately incorrect about your component. — Simon Hyll
– Simon Hyll, Commented May 1, 2017 at 1:45

Tomasz Kostuch · Accepted Answer · 2017-08-20 06:17:05Z

1

This should work

import Test from './components/Test.vue';

export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    components: {
      Test
    }
  }

And if you want to pass props

<template>
<Test :message=msg></Test>
</template>

edited Aug 20, 2017 at 6:17

answered Aug 20, 2017 at 6:11

Tomasz Kostuch

2491 silver badge14 bronze badges

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

Comments

Mo Mirmousavi · Accepted Answer · 2017-05-01 06:30:32Z

0

I use props in component code (components/xxx.vue) and resolved it.

answered May 1, 2017 at 6:30

Mo Mirmousavi

1,0351 gold badge7 silver badges13 bronze badges

Collectives™ on Stack Overflow

Import vue.js component

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related