Vue.js: comment spécifier des accessoires dans un composant de fichier unique?
Je définis un composant de fichier unique
Je veux utiliser accessoires option sur ce composant.
Mais où puis-je ajouter le 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>
3 réponses
Après une longue expérience, j'ai trouvé une solution pratique:
La structure du fichier de projet:
src/
assets/
components/
Home.vue
App.vue
main.js
package.json
config.js
index.html
Maintenant, nous voulons accéder aux champs VM du composant racine -- App à l'intérieur du sous-composant Home.vue, avec vue-route activé.
Principal.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>
À la maison.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
Notez que le prop interne lié la propriété sur l'attribut du composant tag (<router-view> Tag dans ce cas.), PAS directement sur le composant parent.
Donc, nous devons lier manuellement le champ props en tant qu'attribut sur la balise component. Voir: http://vuejs.org/guide/components.html#Passing-Data-with-Props
Notez également que j'ai utilisé un .sync sur cet attribut, car la liaison est unidirectionnelle par défaut: http://vuejs.org/guide/components.html#Prop-Binding-Types
Vous pouvez voir, partager le le statut via les composants d'imbrication est un peu confus. Pour faire une meilleure pratique, nous pouvons utiliser Vuex .
Vous pouvez le faire comme ceci:
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>
principal.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 } })
}
});
Depuis quelques mois, Vue a son propre styleguide pour les références et des trucs comme ça. Les accessoires sont l'une des références, en fait une référence essentielle.
Mauvais
props: ['status']
Bon
props: {
status: String
}
Encore mieux
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
Vous pouvez trouver plus à ce sujet ici