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

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;

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

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

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.

// 子组件
<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>

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!