Comment modifier la valeur du composant parent dans vue

Méthode Vue pour modifier la valeur du composant parent : 1. Transmettez la méthode du composant parent au composant enfant via les accessoires et recevez-la via les accessoires dans le composant enfant 2. Déclenchez la méthode du composant parent via "this.$emit ; " pour implémenter la modification ; 3. Déclencher directement la modification du composant parent via "this.$parent".

L'environnement d'exploitation de ce tutoriel : système Windows 10, Vue version 3, ordinateur Dell G3.

Comment modifier la valeur du composant parent dans vue ?

Le composant neutron de Vue modifie les données du composant parent

Étant donné que Vue est un flux de données unique, il n'existe aucun moyen de modifier directement les données du composant parent dans le composant enfant. Vue préconise un flux de données unique dans l'ordre. pour éviter que le projet ne soit trop complexe, rendant le flux de données difficile à comprendre. Pour citer le site officiel de Vue : les mises à jour des accessoires parents seront transmises aux composants enfants, mais pas l'inverse. Cela empêchera le composant enfant de modifier accidentellement l'état du composant parent, ce qui rendrait le flux de données de votre application difficile à comprendre. Par conséquent, pendant le processus de développement du projet, nous déclenchons toujours les méthodes du composant parent via les composants enfants et modifions les données du composant parent via les méthodes du composant parent.

1. Méthode de transfert des accessoires

Transmettez la méthode du composant parent au composant enfant via les accessoires, et recevez-la via les accessoires dans le composant enfant Vous pouvez directement déclencher la méthode du composant parent sur l'instance du composant actuel. , réalisant ainsi le composant enfant. Modifiez la valeur du composant parent. Les collègues peuvent également envoyer les données du composant enfant au composant parent sous forme de paramètres.

Comme il n'y a pas beaucoup de code, je vais tout montrer pour l'instant. Vous n'avez qu'à vous soucier des événements pertinents

//父组件,设置更改自己数据的方法，将该方法传递给子组件
<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>

Deuxièmement, déclenchez la méthode du composant parent via ceci.$emit

Personnalisez une méthode dans le fichier. composant parent, puis transmettez-le au composant enfant, le composant enfant déclenche directement les données dans le composant parent via this.$emit pour réaliser la communication entre le composant parent et l'enfant. Le composant enfant déclenche l'événement et le composant parent écoute l'événement.

//父组件，将定义的方法传递给子元素
<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>

3. Le composant enfant déclenche directement le composant parent via this.$parent (le code est simple et recommandé)

Le composant enfant déclenche directement l'événement du composant parent, sans avoir besoin de transmission de méthode, de réception et de définition d'événement. .

//父组件，声明需要的方法
<template>
  <div>
    <h1>我是父组件</h1>
    <HelloWorld :msg="msg"/>
  </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.$parent直接触发父组件方法
<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.$parent.changeMsg(this.text,this.num)
    }
  },
}
</script>
 
<style scoped>
 
</style>

Apprentissage recommandé : "Tutoriel vidéo vue.js"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!