Kommunikation zwischen Komponenten in Vue.js – dynamische Eigenschaftsübertragung

Dieses Mal werde ich Ihnen die Kommunikation zwischen Vue.js-Komponenten vorstellen – dynamische Attributübertragung , Kommunikation zwischen Vue.js-Komponenten – welche Vorsichtsmaßnahmen für die dynamische Attributübertragung gelten, Folgendes ist ein praktischer Fall, werfen wir einen Blick darauf.

Der Inhalt im Formular wird dynamisch in der Unterkomponente

<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>

Unterkomponente 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>

Komponente Kommunikation zwischen - dynamische Attributübergabe

Slot Slot

übergibt eine Vorlage an die untergeordnete Komponente

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

com-a-Komponente

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

Wenn sich im übergebenen Slot kein Inhalt befindet, ist er leer

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

Legen Sie den Standardwert für den Slot fest

<slot>no slot</slot>

dann anzeigen

Benannter Slot

<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>

in com-a-Komponente Ausführungsergebnis:

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Inhalte finden Sie auf der chinesischen PHP-Website

Andere verwandte Artikel!

Empfohlene Lektüre:

Ereignisbindung von Vue.js – Ereignisbindung bilden

vue von Vue.js Tag-Attributen und bedingtes Rendern

Das obige ist der detaillierte Inhalt vonKommunikation zwischen Komponenten in Vue.js – dynamische Eigenschaftsübertragung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!