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

Question

I'm defining a single file component

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> 

Answer 1

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.