Detaillierte Erläuterung der Datenübertragung von der übergeordneten Vue-Komponente zur untergeordneten Komponente über Requisiten

1. Führen Sie beispielsweise die Unterkomponente HelloWorld.vue unter den Skripten der übergeordneten Komponente app.vue ein

import HelloWorld from './components/HelloWorld'

2. Zu Komponenten hinzufügen,

components:{
    HelloWorld
  }

3. Rendern Sie den Inhalt der untergeordneten Komponente unter der Vorlage der übergeordneten Komponente.

 <HelloWorld />

4. Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente. Der Code lautet wie folgt: In ist text der Attributname, der an die untergeordnete Komponente übergeben wird, und message sind die Daten, die von der übergeordneten Komponente an die untergeordnete Komponente übergeben werden. Darunter: nicht möglich fehlen, was auf eine dynamische Datenübertragung hinweist.

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <HelloWorld :text = message />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
export default {
  name: 'App',
  components:{
    HelloWorld
  },
  data(){
    return {
      message:'你好，Vue！'
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

5. Die untergeordnete Komponente empfängt die Daten und stellt die Seite dar. Der Code lautet wie folgt, wobei props verwendet wird, um die von der übergeordneten Komponente übergebenen Zeichenfolgendaten zu empfangen: „Hallo, Vue!“ ', wobei Text dem von der übergeordneten Komponente übergebenen Attributnamen entspricht, der Datentyp String ist und der Standardwert eine leere Zeichenfolge ist.

<template>
  <p>{
   
   {text}}</p>
</template>

<script>
export default {
  name: 'HelloWorld',
  props:{
    text:{
      type:String,
      default: ''
    }
  }
}
</script>