Propriétés des composants

Propriétés parent vers enfant

Utilisation d’un autre composant pour passer des Propriétés du parent vers l’enfant via une variable

HTML

<login-form />

Script

//à mettre après la création de l'app (let app = Vue.createApp({...})
app.component('login-form', {
  template:`
  <form @submit.prevent="handleSubmit">
    <h1>Propriétés des composants - vue.js</h1>
    <custom-input type="email" v-bind:label="emailLabel" /> //v-bind : autorise l'utilisation de la variable javascript "emailLabel"
    <custom-input type="password" :label="passwordLabel" /> //équivalent de v-bind
    <button>Log in</button>
  </form>
  `,
  components: ['custom-input'], //dit au composant qu'il peut utiliser une liste d'autre composant 'custom-input'
  data() {
    return {
      title: 'Login form',
      email: '',
      password: '',
      emailLabel: 'Email', //variable à passer à l'enfant
      passwordLabel: 'Password'
    }
  },
  methods: {
    handleSubmit(){
        console.log(this.email, this.password)
    }
  }
})
app.component('custom-input', {
    template: `
      <label>
         //variable définie dans le parent
        <input type="text">
      </label>
    `,
    props: ['label'] //utilise la valeur contenue dans la propriété label du parent soit :label="emailLabel" => 'email'
})

Propriétés parent vers enfant (string)

Utilisation d’un autre composant pour passer des Propriétés du parent vers l’enfant directement par une string

HTML

<login-form />

Script

//à mettre après la création de l'app (let app = Vue.createApp({...})
app.component('login-form', {
  template:`
  <form @submit.prevent="handleSubmit">
    <h1>Propriétés des composants - vue.js</h1>
    <custom-input type="email" label="Enter Email :" /> //envoie la string directement sans utiliser de variable interne
    <custom-input type="password" label="Enter Password :" /> //envoie la string directement sans utiliser de variable interne
    <button>Log in</button>
  </form>
  `,
  components: ['custom-input'], //dit au composant qu'il peut utiliser une liste d'autre composant 'custom-input'
  data() {
    return {
      title: 'Login form',
      email: '',
      password: '',
      emailLabel: 'Email',
      passwordLabel: 'Password'
    }
  },
  methods: {
    handleSubmit(){
        console.log(this.email, this.password) // n'affiche rien pour l'instant car la valeur des variables n'est pas envoyé à l'enfant
    }
  }
})
app.component('custom-input', {
    template: `
      <label>
         //variable définie dans le parent
        <input type="text">
      </label>
    `,
    props: ['label'] //utilise la valeur contenue dans la propriété label du parent soit label="Enter Email:"
})

Variable parent vers enfant

Utilisation de v-model pour passer une variable vers son enfant. Pour ensuite changer la valeur de la variable et l’update à son parent.

HTML

<login-form />

Script

//à mettre après la création de l'app (let app = Vue.createApp({...})
app.component('login-form', {
  template:`
  <form @submit.prevent="handleSubmit">
    <h1>Propriétés des composants - vue.js</h1>
    <custom-input v-model="email" :label="emailLabel" />
    <!-- Envoie la valeur de email dans modelValue grace à v-model  -->
    <custom-input v-model="password" :label="passwordLabel" />
    <!-- Envoie la valeur de password dans modelValue grace à v-model  -->
    <button>Log in</button>
  </form>
  `,
  components: ['custom-input'], //dit au composant qu'il peut utiliser une liste d'autre composant 'custom-input'
  data() {
    return {
      title: 'Login form',
      email: '', //variable envoyé dans modelValue
      password: '', //variable envoyé dans modelValue
      emailLabel: 'Email',
      passwordLabel: 'Password'
    }
  },
  methods: {
    handleSubmit(){
        console.log(this.email, this.password) //affichera la valeur de "email" et "password" <- modelValue <- value
    }
  }
})
app.component('custom-input', {
    template: `
      <label>
        
        <input type="text" v-model="inputValue"> //envoie la valeur de l'input dans la variable inputValue
      </label>
    `,
    props: ['label', 'modelValue'], //la variable inputValue est définie comme une propriété du composant
    computed: { //objet qui permet d'utiliser des variables comme des clefs permettant de récupéré les valeurs du parent via set et get
      inputValue: {
        get(){
          return this.modelValue //renvoie modelValue dans inputValue
          // à l'actualisation si une variable du parent ici : email, password est modifier dans le code
          // l'enfant recevra la valeur qu'il retournera comme valeur de son champ et l'affichera
          // par exemple si password: "je suis un mot de passe" -> il l'affichera directement dans son champ
        },
        set(value){
          console.log(value) // affiche la valeur de value -> soit inputValue -> modelValue -> password/email
          //tout ça en temps réel ce qui changera en fonction de la valeur des champs
          this.$emit('update:modelValue', value)
          // $emit est une fonction qui émet des évenements que d'autres Composants peuvent écouter
          // update est l'évenement utilisé ici qui permet de modifier la valeur d'une Variable d'un parent
          // l'update changera donc la valeur de modelValue vers value
          // donc modelValue changera sa valeur ce qui implique
          // que password et email vont changer respectivement leur valeur -> modelValue -> value grace au "v-model"
        }
      }
    }
})

Le code étant un peu compliqué à comprendre je vais schématiser à l’aide d’image

Explication pour le get()

Explication pour le set(value)

INFORMATION IMPORTANTES

Les propriétés ne peuvent être passés qu’a leurs enfants ou parents pas entre des composants séparés.