Je me demandais comment passer un objet à un composant enfant à l'aide d'accessoires et de récupération. Je comprends comment le faire en tant qu'attributs mais comment passer un objet et récupérer l'objet du composant enfant? Lorsque j'utilise this.props à partir du composant enfant, un message d'erreur non défini ou s'affiche.
Composant parent
<template>
<div>
<my-component :v-bind="props"></my-component>
</div>
</template>
<script>
import ChildComponent from "ChildComponent.vue";
export default {
name: 'ParentComponent',
mounted() {
},
props: {
firstname: 'UserFirstName',
lastname: 'UserLastName'
foo:'bar'
},
components: {
ChildComponent
},
methods: {
}
}
</script>
<style scoped>
</style>
Composante enfant
<script>
<template>
<div>
</div>
</template>
export default {
name: 'ChildComponent',
mounted() {
console.log(this.props)
}
}
</script>
Aussi simple que cela:
Composant parent:
<template>
<div>
<my-component :propObj="anObject"></my-component>
</div>
</template>
<script>
import ChildComponent from "ChildComponent.vue";
export default {
name: 'ParentComponent',
mounted() { },
props: {
anObject: Object
},
components: {
ChildComponent
},
}
</script>
<style scoped>
</style>
Composant enfant:
export default {
props: {
// type, required and default are optional, you can reduce it to 'options: Object'
propObj: { type: Object, required: false, default: {"test": "wow"}},
}
}
Cela devrait marcher!
Jetez un coup d'œil à la documentation sur les accessoires également:
https://vuejs.org/v2/guide/components.html#Props
Si vous souhaitez envoyer des données de l'enfant au parent, comme indiqué dans les commentaires, vous devez utiliser des événements ou jeter un coup d'œil à la fonctionnalité 'sync' disponible dans la version 2.3 +.
Voici une solution simple pour passer de nombreux accessoires en tant qu'objet dans un composant
<template>
<div>
<!-- different ways to pass in props -->
<my-component v-bind="props"></my-component>
<my-component :firstname="props.firstname" :lastname="props.lastname" :foo="props.foo">
</my-component>
</div>
</template>
<script>
import ChildComponent from "ChildComponent.vue";
export default {
name: 'ParentComponent',
props: {
firstname: 'UserFirstName',
lastname: 'UserLastName'
foo:'bar'
},
components: {
ChildComponent
}
}
</script>
<template>
<div>
</div>
</template>
<script>
export default {
name: 'ChildComponent',
props: ['firstname', 'lastname', 'foo'],
mounted() {
console.log(this.props)
}
}
</script>