Vue.js: एकल फ़ाइल घटक में प्रोप निर्दिष्ट कैसे करें?

Question

मैं एक single file component

मुझे लगता है कि घटक पर props विकल्प का उपयोग करना परिभाषित करने कर रहा हूँ।

लेकिन मैं कोड कहां जोड़ सकता हूं?

<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

प्रयोग के एक लंबे समय के बाद, मैं एक व्यावहारिक समाधान पता चला:

परियोजना फ़ाइल संरचना:

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

अब, हम जड़ घटक का उपयोग करना चाहते हैं - के वीएम फ़ील्ड उप-घटक Home.vue के अंदर vue-route पर।

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> 

---

निष्कर्ष

ध्यान दें कि भीतरी प्रोप घटक टैग की विशेषता पर संपत्ति के लिए बाध्य (इस मामले में <router-view> टैग।), नहीं सीधे माता पिता घटक पर।

तो, हम मैन्युअल रूप से घटक टैग पर एक विशेषता के रूप में गुजरने वाले प्रोप फ़ील्ड को बांधना चाहिए। देखें: http://vuejs.org/guide/components.html#Passing-Data-with-Props

इसके अलावा, नोटिस मुझे लगता है कि विशेषता पर एक .sync इस्तेमाल किया, क्योंकि बंधन डिफ़ॉल्ट रूप से एक तरह से नीचे है: http://vuejs.org/guide/components.html#Prop-Binding-Types

आप देख सकते हैं, घोंसले घटकों के माध्यम से स्थिति साझा एक सा है उलझन में। बेहतर अभ्यास करने के लिए, हम Vuex का उपयोग कर सकते हैं।

Answer 2

आप इस तरह यह कर सकते हैं:

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 } }) 
    } 
}); 

Answer 3

महीने पहले के एक जोड़े के बाद से, Vue अपनी ही है styleguide इस तरह के संदर्भ और सामान के लिए। प्रॉप्स संदर्भों में से एक हैं, वास्तव में एक आवश्यक है।

खराब

props: ['status'] 

अच्छा

props: { 
    status: String 
} 

और भी बेहतर

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

आप इस here