So ändern Sie den Wert der übergeordneten Komponente in Vue

Vue-Methode zum Ändern des Werts der übergeordneten Komponente: 1. Übergeben Sie die Methode der übergeordneten Komponente über Requisiten an die untergeordnete Komponente und empfangen Sie sie über Requisiten in der untergeordneten Komponente. 2. Lösen Sie die Methode der übergeordneten Komponente über „this.$emit“ aus „Um die Änderung zu implementieren; 3. Lösen Sie die Änderung der übergeordneten Komponente direkt über „this.$parent“ aus.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Vue Version 3, Dell G3-Computer.

Wie ändere ich den Wert der übergeordneten Komponente in Vue?

Vue-Neutronenkomponente ändert die Daten der übergeordneten Komponente

Da Vue ein einzelner Datenfluss ist, gibt es keine Möglichkeit, die Daten in der übergeordneten Komponente direkt in der untergeordneten Komponente zu ändern um zu verhindern, dass das Projekt zu komplex wird und der Datenfluss dadurch schwer verständlich wird. Um die offizielle Website von Vue zu zitieren: Aktualisierungen der übergeordneten Requisiten werden nach unten in die untergeordneten Komponenten übertragen, nicht jedoch umgekehrt. Dadurch wird verhindert, dass die untergeordnete Komponente versehentlich den Status der übergeordneten Komponente ändert, wodurch der Datenfluss Ihrer Anwendung schwer verständlich wird. Daher lösen wir während des Projektentwicklungsprozesses immer die Methoden in der übergeordneten Komponente über die untergeordneten Komponenten aus und ändern die Daten der übergeordneten Komponente über die Methoden der übergeordneten Komponente.

1. Props-Übertragungsmethode

Übergeben Sie die Methode der übergeordneten Komponente über Requisiten und empfangen Sie sie über Requisiten in der untergeordneten Komponente. Sie können die Methode der übergeordneten Komponente direkt auf der Instanz der aktuellen Komponente auslösen , wodurch die untergeordnete Komponente erkannt wird. Kollegen können die Daten der untergeordneten Komponente auch in Form von Parametern an die übergeordnete Komponente senden.

Da es nicht viel Code gibt, werde ich vorerst alles zeigen. Sie müssen sich nur um die relevanten Ereignisse kümmern Übergeben Sie es dann an die übergeordnete Komponente und übergeben Sie es an die untergeordnete Komponente. Die untergeordnete Komponente löst dadurch direkt die Daten in der übergeordneten Komponente aus. $ emittieren, um die Kommunikation zwischen übergeordneter und untergeordneter Komponente zu realisieren. Die untergeordnete Komponente löst das Ereignis aus und die übergeordnete Komponente wartet auf das Ereignis.

//父组件,设置更改自己数据的方法，将该方法传递给子组件
<template>
  <div>
    <h1>我是父组件</h1>
    <HelloWorld :msg="msg" :changeMsg="changeMsg"/>
  </div>
</template>
 
<script>
import HelloWorld from &#39;@/components/HelloWorld.vue&#39;
 
export default {
  name: &#39;Home&#39;,
  components: {
    HelloWorld
  },
  methods:{
    changeMsg(text,num){
      console.log(text,num);
      this.msg=this.msg+1
    }
  },
  data(){
    return{
      msg:1
    }
  }
}
</script>
 
 
 
//子组件，接收父组件传递过来的方法，通过props接收到的方法和数据，在组件实例上可以直接获取和触发
<template>
  <div>
    <h1>我是子组件<button @click="changeFatherData">点我更改父组件数据</button></h1>
    <h1>父组件数据：{{msg}}</h1>
    
  </div>
</template>
 
<script>
export default {
  name: &#39;HelloWorld&#39;,
  props: {
    msg: Number,
    changeMsg:Function
  },
  data(){
    return{
      text:"我是子组件数据，我要发送给父组件",
      num:12
    }
  },
  methods:{
    changeFatherData(){
      this.changeMsg(this.text,this.num)
    }
  },
}
</script>
 
<style scoped>
 
</style>

3. Die untergeordnete Komponente löst dadurch direkt die übergeordnete Komponente aus.$parent (der Code ist einfach und empfehlenswert)

Die untergeordnete Komponente löst direkt das Ereignis der übergeordneten Komponente aus, ohne dass eine Methodenübertragung, ein Empfang und eine Ereignisdefinition erforderlich sind .

//父组件，将定义的方法传递给子元素
<template>
  <div>
    <h1>我是父组件</h1>
    <HelloWorld :msg="msg" @changeMsg="changeMsg"/>
  </div>
</template>
 
<script>
import HelloWorld from &#39;@/components/HelloWorld.vue&#39;
 
export default {
  name: &#39;Home&#39;,
  components: {
    HelloWorld
  },
  methods:{
    changeMsg(text,num){
      console.log(text,num);
      this.msg=this.msg+1
    }
  },
  data(){
    return{
      msg:1
    }
  }
}
</script>
 
 
//子组件，通过this.$emit触发父组件方法，更改父组件数据，同时可以进行数据传值
<template>
  <div>
    <h1>我是子组件<button @click="changeFatherData">点我更改父组件数据</button></h1>
    <h1>父组件数据：{{msg}}</h1>
    
  </div>
</template>
 
<script>
export default {
  name: &#39;HelloWorld&#39;,
  props: {
    msg: Number,
  },
  data(){
    return{
      text:"我是子组件数据，我要发送给父组件",
      num:12
    }
  },
  methods:{
    changeFatherData(){
      this.$emit(&#39;changeMsg&#39;,this.text,this.num)
    }
  },
}
</script>
 
<style scoped>
 
</style>

Empfohlenes Lernen: „

vue.js Video-Tutorial

“

Das obige ist der detaillierte Inhalt vonSo ändern Sie den Wert der übergeordneten Komponente in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!