Communication entre les composants dans Vue.js

Cette fois, je vais vous apporter la communication entre les composants Vue.js. Quelles sont les précautions lors de l'utilisation de la communication entre les composants Vue.js. Ce qui suit est un cas pratique, jetons un coup d'œil.

Passez le numéro=99 au sous-composant

<template>
  <div id="myapp">
    <com-a number=99></com-a>
  </div></template><script>
  import ComA from &#39;./components/a.vue&#39;
  export default {    components: {
      ComA
    }
  }</script>

Dans le sous-composant a.vue

<template>
  <div class="hello">
    {{hello}}
    {{ number }}  </div></template><script>
  export default {//    声明number属性//    未指定类型//    props: [&#39;number&#39;],//    指定类型
    props: {      &#39;number&#39;: [Number, String]
    },
    data () {      return {        hello: &#39;I am componnet a&#39;
      }
    }
  }</script>

Effet d'exécution

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez faire attention au site Web chinois php autre articles connexes !

Lecture recommandée :

Attributs des balises Vue et rendu conditionnel de Vue.js

Vue.js calculé propriétés et écoute des données

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!