Heim > Web-Frontend > View.js > Welche fünf Möglichkeiten gibt es, Werte in Vue-Bruderkomponenten zu übergeben?

Welche fünf Möglichkeiten gibt es, Werte in Vue-Bruderkomponenten zu übergeben?

醉折花枝作酒筹
Freigeben: 2023-01-13 00:45:18
Original
21598 Leute haben es durchsucht

Die fünf Methoden sind: 1. Die übergeordnete Komponente übergibt den Wert an die untergeordnete Komponente. 2. Die untergeordnete Komponente übergibt den Wert an die übergeordnete Komponente. 3. Definieren Sie ein benutzerdefiniertes Ereignis auf dem Etikett in der übergeordneten Komponente innerhalb des Ereignisses; 4. Benutzerdefinierte Ereignisse in Unterkomponenten auslösen und Parameter übergeben; 5. Parameter über die öffentliche Komponente Bus.js übergeben;

Welche fünf Möglichkeiten gibt es, Werte in Vue-Bruderkomponenten zu übergeben?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Vue-Version 2.9.6, DELL G3-Computer.

Fünf Möglichkeiten, Werte in Vue-Komponenten zu übergeben:

1. Übergeben Sie Werte von übergeordneten Komponenten an untergeordnete Komponenten:

Binden Sie übergeordnete Daten an untergeordnete Komponenten, und untergeordnete Komponenten akzeptieren Parameter über Requisiten.

Als nächstes veranschaulichen wir anhand eines Beispiels, wie die übergeordnete Komponente Werte an die untergeordnete Komponente übergibt: So erhalten Sie die Daten in der übergeordneten Komponente App.vue in der untergeordneten Komponente Users.vue-Benutzer:["Henry"," Bucky“, „Emily“ ]

//App.vue父组件
<template>
  <div id="app">
    <users v-bind:users="users"></users>//前者自定义名称便于子组件调用,后者要传递数据名
  </div>
</template>
<script>
import Users from "./components/Users"
export default {
  name: &#39;App&#39;,
  data(){
    return{
      users:["Henry","Bucky","Emily"]
    }
  },
  components:{
    "users":Users
  }
}
Nach dem Login kopieren
//users子组件
<template>
  <div class="hello">
    <ul>
      <li v-for="user in users">{{user}}</li>//遍历传递过来的值,然后呈现到页面
    </ul>
  </div>
</template>
<script>
export default {
  name: &#39;HelloWorld&#39;,
  props:{
    users:{           //这个就是父组件中子标签自定义名字
      type:Array,
      required:true
    }
  }
}
</script>
Nach dem Login kopieren

2. Die untergeordnete Komponente übergibt den Wert an die übergeordnete Komponente:

Legen Sie die zu übergebenden Daten in der übergeordneten Komponente fest 『data(){ id: value}』

Als nächstes Verwenden Sie ein Beispiel, um zu veranschaulichen, wie die untergeordnete Komponente den Wert an die übergeordnete Komponente sendet: Wenn wir auf „Vue.js Demo“ klicken, übergibt die untergeordnete Komponente den Wert an die übergeordnete Komponente und der Text ändert sich vom Original. Ein Wert wird übergeben“ bis „Das untergeordnete Element übergibt den Wert an die übergeordnete Komponente“, wodurch die untergeordnete Komponente an die übergeordnete Komponente übergeben wird. Übergabe von Komponentenwerten.

Welche fünf Möglichkeiten gibt es, Werte in Vue-Bruderkomponenten zu übergeben?

// 子组件
<template>
  <header>
    <h1 @click="changeTitle">{{title}}</h1>//绑定一个点击事件
  </header>
</template>
<script>
export default {
  name: &#39;app-header&#39;,
  data() {
    return {
      title:"Vue.js Demo"
    }
  },
  methods:{
    changeTitle() {
      this.$emit("titleChanged","子向父组件传值");//自定义事件  传递值“子向父组件传值”
    }
  }
}
</script>
Nach dem Login kopieren
rrree

3. Definieren Sie ein benutzerdefiniertes Ereignis auf dem Etikett in der übergeordneten Komponente und rufen Sie die Parameter innerhalb des Ereignisses ab.

4. Lösen Sie das benutzerdefinierte Ereignis in der untergeordneten Komponente aus. (this.$ emit('Benutzerdefiniertes Ereignis in der übergeordneten Komponente', Parameter))

5. Übergeben Sie Parameter über die öffentliche Komponente Bus.js

[Verwandte Empfehlung: „vue.js-Tutorial“]

Das obige ist der detaillierte Inhalt vonWelche fünf Möglichkeiten gibt es, Werte in Vue-Bruderkomponenten zu übergeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage