Communication entre composants dans Vue.js - transfert de propriété dynamique

Cette fois, je vais vous apporter la communication entre les composants Vue.js - transfert dynamique d'attribut , communication entre les composants Vue.js - quelles sont les précautions pour le transfert d'attribut dynamique, ce qui suit est un cas pratique, jetons-y un coup d'œil.

Le contenu du formulaire est affiché dynamiquement dans le sous-composant

<template>
  <div>
    <input>
    <com-a></com-a>
  </div></template><script>
  import ComA from &#39;./components/a.vue&#39;
  export default {    components: {
      ComA
    },
    data () {      return {        myVal: &#39;&#39;
      }
    }
  }</script>

Sous-composant a.vue

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

composant Communication entre - transfert d'attribut dynamique

slot slot
transmet un modèle au composant enfant

<com-a :my-value="myVal">
      <p>我是一个插槽</p>
      <span>123456</span></com-a>

com-a composant

<template>
  <div class="hello">
    {{hello}}
    {{ myValue }}
  //给插槽设置默认值    <slot>no slot</slot>
  </div></template>

S'il n'y a pas de contenu dans le slot passé, il est vide

<com-a :my-value="myVal"></com-a>

Définissez la valeur par défaut du slot

<slot>no slot</slot>

puis affichez

Emplacement nommé

<template>  <div id="myapp">
    <!--具名插槽-->
    <com-a :my-value="myVal">
      <p slot="header">xxxx header</p>
      <p slot="footer">yyyy footer</p>
    </com-a>
  </div></template>

dans com-un résultat d'exécution du composant :

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 Autres articles liés !

Lecture recommandée :

Liaison d'événement de Vue.js - liaison d'événement de formulaire

vue des attributs de balise Vue.js et rendu conditionnel

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!