Bagaimana untuk mengubah suai nilai komponen induk dalam vue

Cara Vue mengubah suai nilai komponen induk: 1. Hantarkan kaedah komponen induk kepada komponen anak melalui prop, dan terima melalui prop dalam komponen anak 2. Cetuskan induk melalui "this.$ emit" Kaedah komponen melaksanakan pengubahsuaian; 3. Secara langsung mencetuskan pengubahsuaian komponen induk melalui "this.$parent".

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi Vue 3, komputer Dell G3.

Bagaimana untuk mengubah suai nilai komponen induk dalam Vue?

Komponen neutron Vue menukar data komponen induk

Oleh kerana vue ialah aliran data tunggal, tiada cara untuk mengubah suai komponen induk secara langsung dalam komponen anak Untuk data, Vue menyokong aliran data tunggal untuk mengelakkan aliran data daripada sukar difahami apabila projek itu terlalu kompleks. Untuk memetik tapak web rasmi Vue: Kemas kini kepada prop induk akan mengalir ke bawah ke komponen anak, tetapi bukan sebaliknya. Ini akan menghalang komponen anak daripada menukar keadaan komponen induk secara tidak sengaja, menjadikan aliran data aplikasi anda sukar difahami. Oleh itu, semasa proses pembangunan projek, kami sentiasa mencetuskan kaedah dalam komponen induk melalui komponen anak, dan menukar data komponen induk melalui kaedah komponen induk.

1. Kaedah pemindahan prop

Melalui prop, kaedah komponen induk dihantar kepada komponen anak, kaedah diterima melalui prop, dan komponen induk boleh dicetuskan secara langsung pada contoh komponen semasa Kaedah komponen, supaya komponen anak boleh menukar nilai komponen induk. Rakan sekerja juga boleh menghantar data komponen anak kepada komponen induk dalam bentuk parameter.

Memandangkan kod tidak banyak, saya akan tunjukkan semuanya buat masa ini Anda hanya perlu mengambil berat tentang acara yang berkaitan

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

2. Pencetus. kaedah komponen induk melalui ini.$emit

Sesuaikan kaedah dalam komponen induk dan kemudian hantar kepada komponen anak Komponen anak secara langsung mencetuskan data dalam komponen induk melalui ini.$emit untuk merealisasikan induk -komunikasi komponen kanak-kanak. Komponen anak mencetuskan acara dan komponen induk mendengar acara tersebut.

//父组件，将定义的方法传递给子元素
<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 Komponen anak secara langsung mencetuskan komponen induk melalui ini.$parent (kodnya mudah, disyorkan)

Komponen anak secara langsung mencetuskan peristiwa komponen induk, tanpa keperluan untuk penghantaran dan penerimaan kaedah, dan definisi peristiwa.

//父组件，声明需要的方法
<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>

Pembelajaran yang disyorkan: "tutorial video vue.js"

Atas ialah kandungan terperinci Bagaimana untuk mengubah suai nilai komponen induk dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!