Penjelasan terperinci tentang langkah-langkah fungsi pemindahan nilai dalam dokumentasi Vue

Vue.js ialah rangka kerja JavaScript yang popular Salah satu kelebihannya ialah keupayaan mengikat data yang kuat. Dalam Vue.js, data dihantar melalui komponen dan untuk menghantar data antara komponen yang berbeza, Vue.js menyediakan beberapa fungsi penghantaran nilai, seperti $emit dan $on. Dalam artikel ini, kami akan memperincikan cara menggunakan fungsi ini untuk melaksanakan pemindahan nilai.

1. Fahami konsep asas komunikasi komponen

Apabila membangun dengan Vue.js, anda biasanya perlu menggunakan berbilang komponen untuk bekerjasama membina aplikasi yang lengkap. Oleh itu, komunikasi antara komponen adalah sangat penting, dan ia boleh membantu kita melaksanakan pelbagai fungsi dan interaksi. Dalam Vue.js, terdapat dua cara untuk berkomunikasi antara komponen:

• Komunikasi antara komponen ibu bapa dan anak
• Komunikasi antara komponen adik beradik

Apabila berkomunikasi antara komponen ibu bapa dan anak, anda boleh menggunakan props dan fungsi $emit. Apabila berkomunikasi antara komponen adik-beradik, ia boleh dicapai dengan bantuan komponen induk yang sama.

2. Gunakan $emit untuk melaksanakan komunikasi antara komponen ibu bapa dan anak

$emit() ialah fungsi pemindahan nilai yang sangat penting dalam Vue.js, yang digunakan untuk ibu bapa dan komponen kanak-kanak komunikasi antara. Fungsi fungsi ini adalah untuk menghantar peristiwa tersuai daripada komponen anak kepada komponen induk dan boleh menghantar beberapa parameter.

Berikut ialah langkah untuk menggunakan $emit() untuk melaksanakan komunikasi antara komponen ibu bapa dan anak:

Langkah 1: Tentukan komponen anak dan gunakan fungsi $emit() untuk mencetuskan peristiwa dalam komponen.

<template>
  <div>
    <button @click="passData">传递数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    passData() {
      this.$emit('get-data', 'Hello Vue')
    }
  }
}
</script>

Dalam kod di atas, kami mentakrifkan subkomponen dan menentukan butang di dalamnya Apabila butang diklik, kaedah passData dicetuskan menggunakan fungsi $emit() untuk mencetuskan kaedah yang dipanggil get -peristiwa data dan membawa parameter rentetan Hello Vue.

Langkah 2: Gunakan arahan v-on dalam komponen induk untuk mendengar peristiwa yang dicetuskan oleh komponen anak, dan tentukan fungsi pengendali untuk menerima parameter yang diluluskan oleh komponen anak.

<template>
  <div>
    <child-component @get-data="getData"></child-component>
    <p>接收到子组件传递的数据：{{ data }}</p>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent'
export default {
  components: { ChildComponent },
  data() {
    return {
      data: ''
    }
  },
  methods: {
    getData(data) {
      this.data = data
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan arahan v-on untuk mendengar peristiwa yang dinamakan get-data Apabila subkomponen mencetuskan acara, kaedah bernama getData akan dipanggil dan subkomponen akan menjadi Parameter. diluluskan dihantar kepada kaedah. Dalam kaedah ini, kami menetapkan parameter kepada atribut data untuk memaparkan data yang diluluskan oleh komponen anak dalam komponen induk.

3. Gunakan $on untuk melaksanakan komunikasi antara komponen adik-beradik

$on() ialah satu lagi fungsi pemindahan nilai penting dalam Vue.js, yang digunakan untuk komunikasi komponen adik-beradik antara . Fungsi fungsi ini adalah untuk mendengar acara tersuai dalam komponen kanak-kanak dan bertindak balas kepada acara tersebut.

Berikut ialah langkah untuk melaksanakan komunikasi antara komponen adik beradik menggunakan $on():

Langkah 1: Tentukan komponen induk biasa.

<template>
  <div>
    <child-component></child-component>
    <another-child-component></another-child-component>
  </div>
</template>

Dalam kod di atas, kami mentakrifkan komponen induk yang mengandungi dua komponen anak.

Langkah 2: Gunakan fungsi $on() dalam komponen anak untuk mendengar acara tersuai.

<script>
export default {
  created() {
    this.$root.$on('trigger-event', this.handleEvent)
  },
  methods: {
    handleEvent() {
      console.log('Hello Vue!')
    }
  },
  destroyed() {
    this.$root.$off('trigger-event', this.handleEvent)
  }
}
</script>

Dalam kod di atas, kami menggunakan fungsi cangkuk yang dicipta untuk mula mendengar acara yang dinamakan trigger-event apabila komponen anak dicipta. Apabila acara didengari, kaedah bernama handleEvent dipanggil, yang digunakan untuk mengendalikan acara. Kami juga menggunakan fungsi cangkuk yang dimusnahkan untuk mengalih keluar pendengar acara apabila komponen kanak-kanak dimusnahkan untuk mengelakkan kebocoran memori.

Langkah 3: Gunakan fungsi $emit() dalam komponen anak lain untuk mencetuskan acara.

<script>
export default {
  methods: {
    triggerEvent() {
      this.$root.$emit('trigger-event')
    }
  }
}
</script>

Dalam kod di atas, kami mentakrifkan komponen kanak-kanak dan menentukan butang di dalamnya. Apabila pengguna mengklik butang, kaedah triggerEvent dipanggil, yang mencetuskan peristiwa bernama trigger-event menggunakan fungsi $emit().

4. Ringkasan

Dalam Vue.js, dengan menggunakan fungsi $emit dan $on, pemindahan nilai antara komponen ibu bapa-anak dan komponen adik-beradik boleh dicapai. Pertama, kita perlu mentakrifkan subkomponen dan mencetuskan peristiwa tersuai menggunakan fungsi $emit di dalamnya. Seterusnya, kita perlu menggunakan arahan v-on dalam komponen induk untuk mendengar acara dan memproses parameter yang diluluskan oleh komponen anak dalam fungsi pengendali. Untuk komunikasi antara komponen adik-beradik, kita perlu menggunakan fungsi $on untuk mendengar acara tersuai di bawah komponen induk biasa dan menggunakan fungsi $emit untuk mencetuskan acara dalam komponen anak lain. Fungsi pemindahan nilai ini merupakan bahagian yang sangat penting dalam Vue.js Menguasainya membolehkan kami memindahkan data antara komponen dengan lebih baik.

Atas ialah kandungan terperinci Penjelasan terperinci tentang langkah-langkah fungsi pemindahan nilai dalam dokumentasi Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!