Vue.js: How to specify props in single file component?

Question

I want to use props option on that component.

But where can I add the code?

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // note: changing this line won't causes changes
      // with hot-reload because the reloaded component
      // preserves its current state and we are modifying
      // its initial state.
      msg: 'Hello World!'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1 {
  color: #42b983;
}
</style>

Look at @Gijsberts answer below it contains an important note about VueJS style guidelines and how to type your props — Mohammad
– Mohammad, Commented Nov 12, 2019 at 20:58

Alfred Huang · Accepted Answer · 2016-04-17 14:41:20Z

27

After a long time of experiment, I found out a practical solution:

The project file structure:

src/
  assets/
  components/
    Home.vue
  App.vue
  main.js
package.json
config.js
index.html

Now, we want to access the root component -- App's vm fields inside the sub-component Home.vue, with vue-route on.

main.js:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'

Vue.use(VueRouter);

let router = new VueRouter();

router.map({
    '/': {
        name: 'home',
        component: require('./components/Home')
    }
});

router.start(App, 'body');

App.vue:

<template>

    <p>The current path: {{ $route.path }}.</p>
    <p>Outer-Value: {{ outer_var }}</p>
    <hr/>

    <!-- The below line is very very important -->
    <router-view :outer_var.sync="outer_var"></router-view>

</template>

<script>
    import Home from './compnents/Home.vue'

    export default {
        replace: false,
        components: { Home },
        data: function() {
            return {
                outer_var: 'Outer Var Init Value.'
            }
        }
    }
</script>

Home.vue

<template>
    <div>
        <p><input v-model="outer_var" /></p>
        <p>Inner-Value: {{ outer_var }}</p>
    </div>
</template>

<script>
    export default {
        // relating to the attribute define in outer <router-view> tag.
        props: ['outer_var'],
        data: function () {
            return {
            };
        }
    }
</script>

Conclusion

Note that the inner prop bound the property on the attribute of the component tag (<router-view> Tag in this case.), NOT directly on the parent component.

So, we must manually bind the passing props field as an attribute on the component tag. See: http://vuejs.org/guide/components.html#Passing-Data-with-Props

Also, notice I used a .sync on that attribute, because the binding is one-way-down by default: http://vuejs.org/guide/components.html#Prop-Binding-Types

You can see, sharing the status through nesting components is a bit confused. To make a better practice, we can use Vuex.

answered Apr 17, 2016 at 14:41

Alfred Huang

18.4k33 gold badges128 silver badges196 bronze badges

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

2 Comments

Yerko Palma Over a year ago

Prefer the vue.js tag instead of the vuejs tag, because the first one is getting close to 1k questions, and the last one doesn't even have 10 questions, in fact it should be burninated. You'll get a lot more attention with this ;)

Alfred Huang Over a year ago

@YerkoPalma, haha you notice that point... In fact I want to get 5 points on this tag, and then create a synonyms... Everything is aimed at the shiny shiny badge.. Would you mind to give me one point for the goal?

anthonygore · Accepted Answer · 2016-10-04 08:21:37Z

24

You can do it like this:

app.js

<template>
  <div class="hello">
    <h1>{{ parentMsg }}</h1>
    <h1>{{ childMsg }}</h1>
  </div>
</template>

<script>
export default {
  props: ['parentMessage'],
  data () {
    return {
      childMessage: 'Child message'
    }
  }
}
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  data() {
    return {
      message: 'Parent message'
    }
  },
  render(h) {
    return h(App, { props: { parentMessage: this.message } })
  }
});

answered Oct 4, 2016 at 8:21

anthonygore

4,9875 gold badges34 silver badges30 bronze badges

2 Comments

Michael W. Czechowski Over a year ago

This looks like typescript syntax for me, am I right? How'd look in plain JS? For example with require.

Michael Giovanni Pumo Over a year ago

@NEXTLEVELSHIT It's plain JS to me, but in Vue framework. es2015 probably via Babel.

tony19 · Accepted Answer · 2022-07-15 20:01:51Z

18

Since a couple of months ago, Vue has its own styleguide for references and stuff like this. Props are one of the references, actually an essential one.

BAD

props: ['status']

Good

props: {
  status: String
}

Even better

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

You can find more on this here

edited Jul 15, 2022 at 20:01

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 17, 2018 at 8:20

Giesburts

7,84617 gold badges53 silver badges92 bronze badges

3 Comments

Soldeplata Saketos Over a year ago

and you can even use includes instead of indexOf(value) !== -1

cauchi Over a year ago

the styleguide is for v2, he asked for single file components which are (I think) v3

Giesburts Over a year ago

@cauchi you're not correct, SFC was already a thing in Vue.js 2+ :)

Leo · Accepted Answer · 2022-05-03 13:21:27Z

0

just like this,pass the props while call createApp()

view picture`

answered May 3, 2022 at 13:21

Leo

1

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Vue.js: How to specify props in single file component?

4 Answers 4

Conclusion

2 Comments

2 Comments

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Conclusion

2 Comments

2 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related