Penjelasan terperinci tentang cara vue mengemas kini nilai modul induk

Vue ialah rangka kerja bahagian hadapan yang popular dengan paparan dipacu data pada terasnya. Dalam Vue, berkongsi data antara komponen ibu bapa dan anak adalah keperluan biasa. Apabila nilai dalam komponen anak dikemas kini, jika anda perlu mengemas kini nilai dalam komponen induk, anda perlu menggunakan sistem acara Vue.

Sistem acara Vue menyediakan mekanisme komunikasi antara komponen. Komponen menghantar acara tersuai melalui kaedah $emit Komponen induk boleh mendengar acara ini dan mengemas kini data.

Di bawah, kami akan memperkenalkan secara terperinci cara vue mengemas kini nilai modul induk.

1. Gunakan prop untuk menghantar data

Dalam mekanisme komunikasi Vue antara komponen, komponen induk menghantar data kepada komponen anak melalui prop, dan kaedah $emit digunakan dalam komponen anak untuk mencetuskan peristiwa komponen induk .

Tentukan data dalam komponen induk dan hantarkannya kepada komponen anak melalui props komponen diklik Apabila, kaedah $emit dicetuskan dan kandungan data yang perlu dikemas kini diluluskan.

Vue.component('child', {
  props: ['message'],
  template: '<div @click="changeMessage">{{ message }}</div>',
  methods: {
    changeMessage() {
      this.$emit('update:message', 'update message from child component')
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello vue'
  },
  mounted() {
    this.$on('update:message', message => {
      this.message = message
    })
  }
})

Tentukan fungsi cangkuk yang dipasang dalam komponen induk untuk mendengar peristiwa yang dicetuskan oleh komponen anak. Apabila komponen anak mencetuskan kaedah $emit, pengendali peristiwa dalam komponen induk akan dipanggil dan kandungan data akan dikemas kini.

2. Gunakan $parent untuk mengakses komponen induk

Selain menghantar data menggunakan prop, Vue juga menyediakan cara untuk mengakses komponen induk melalui $parent. Mengakses komponen induk melalui $parent boleh mengubah suai kandungan data secara langsung dalam komponen induk.

Berikut ialah contoh kod:

Akses komponen induk melalui ini.$induk dalam komponen anak, dan kemudian ubah suai terus kandungan data dalam komponen induk.

Vue.component('child', {
  template: '<div @click="changeMessage">{{ message }}</div>',
  methods: {
    changeMessage() {
      this.$parent.message = 'update message from child component'
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello vue'
  }
})

Namun, menggunakan kaedah ini akan menyebabkan masalah gandingan yang ketat dan tidak disyorkan untuk digunakan dalam projek formal.

3. Gunakan $root untuk mengakses komponen root

Dalam Vue, anda juga boleh menggunakan $root untuk mengakses instance root. Memandangkan setiap tika Vue mempunyai tika akar yang sepadan, anda boleh menggunakan $root untuk mengakses kandungan data dalam tika akar.

Berikut ialah contoh kod:

Akses tika akar melalui ini.$root dalam komponen anak, dan kemudian ubah suai terus kandungan data dalam tika akar.

Vue.component('child', {
  template: '<div @click="changeMessage">{{ message }}</div>',
  methods: {
    changeMessage() {
      this.$root.message = 'update message from child component'
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'hello vue'
  }
})

Walau bagaimanapun, menggunakan kaedah ini juga akan menyebabkan masalah gandingan yang ketat, dan tidak disyorkan untuk digunakan dalam projek formal.

4. Ringkasan

Dalam Vue, komponen anak boleh menghantar data kepada komponen induk melalui kaedah $emit dan $on, dan komponen induk boleh menghantar data kepada komponen anak melalui props. dan data model v. Pada masa yang sama, kandungan data dalam komponen induk dan contoh akar boleh diakses melalui kaedah $parent dan $root, tetapi tidak disyorkan untuk menggunakannya dalam projek formal.

Di atas memperkenalkan beberapa cara untuk Vue mengemas kini nilai modul induk Pembangun boleh memilih kaedah yang sesuai mengikut situasi khusus yang berbeza.

Atas ialah kandungan terperinci Penjelasan terperinci tentang cara vue mengemas kini nilai modul induk. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!