J'ai besoin de transmettre une variable à un composant. Ma configuration est la suivante:
Principal: Meet.vue
export default {
data () {
return {
search: [how to access the **searchTerm** here?]
Sous: Category.vue :
<html>
<div class="carousel-cell">
<Category :searchTerm="woman"></Category>
</div>
<div class="carousel-cell">
<Category :searchTerm="men"></Category>
</div>
[..]
<script>
import Category from './Category'
export default {
components: {
Category
},
Comment accéder au searchTerm depuis Meet.vue dans Category.vue?
3 Réponses :
Vous utilisez des props , donc la réponse est:
export default{
props: ['searchTerm'],
il peut ensuite être utilisé directement.
Faites comme ci-dessous en appelant le composant Category .
Ici : search: "woman" signifie mot de passe woman comme valeur de la propriété du composant Category .
Puis dans le composant Category :
export default {
props: [search], //No checking of data type and it's not requried
//Everything else
ou
export default {
props: {
search: {type: string, required: true}
//Here it will give error if the search is passed anything but string
//And if search is not passed it will give error.
}
//Everything else
p >
Vous devrez introduire cette propriété searchTerm dans votre composant Category comme décrit dans le Documentation VueJS
Dans Category.vue
props: ['searchTerm'],
data: function () {
return {
// Write on search variable if needed
search: this.searchTerm
}
}
Si vous voulez en appliquer validation sur votre accessoire
export default {
props: {
searchTerm: {
type: String,
required: false,
// If not required, it's possible to give a default value
default: "woman"
},
}
// Your component code (computed, methods, watch, ...)
}
Vous pouvez ensuite lire votre accessoire avec this.searchTerm .
Vous pouvez également le lire directement dans avec {{searchTerm}} par exemple.
Si à certains point que vous devrez écrire sur l'un de vos accessoires, il est préférable de copier sa valeur sur une variable locale et de travailler avec elle
export default {
props: ['searchTerm'],
// Your component code (computed, methods, watch, ...)
}
Merci pour cet exemple. Existe-t-il un moyen de transmettre le searchTerm après sa modification dans le meet.vue ? J'ai essayé v-bind sans succès: `
@Tom Je vous suggère de regarder votre accessoire dans votre composant Catégorie. Vous pouvez avoir un exemple ici stackoverflow.com/questions/44584292/… - et vous pouvez consulter la documentation pour comprendre comment cela fonctionne: vuejs.org/v2/guide/computed.html#Computed-vs-Watched-Propert y
stackoverflow.com/questions/39199303/...