Analisis contoh pemindahan nilai komponen dalam dokumen Vue

Dalam pembangunan Vue, komunikasi antara komponen adalah bahagian yang sangat penting. Menghantar data membolehkan komponen berfungsi lebih baik bersama-sama dan meningkatkan kebolehgunaan semula dan kebolehkomposisian kod antara komponen. Dalam proses pemindahan nilai antara komponen, disebabkan oleh ciri-ciri Vue yang sangat fleksibel, terdapat banyak kaedah untuk mencapai pemindahan data antara komponen.

Artikel ini akan memperkenalkan kaedah pemindahan nilai komponen biasa dalam Vue dan menunjukkan penggunaannya melalui contoh.

1. Pemindahan nilai atribut prop
   Dalam Vue, komponen induk boleh menghantar data ke bawah kepada komponen anak melalui prop. Komponen anak menerima nilai yang diluluskan oleh komponen induk dengan menetapkan pilihan props. Props boleh terdiri daripada sebarang jenis nilai, termasuk jenis primitif, objek atau tatasusunan.

Pertama, kami mencipta komponen induk, bernama parent.vue, kodnya adalah seperti berikut:

<template>
  <div>
    <h2>父组件</h2>
    <p>我是父组件的信息：{{parentInfo}}</p>
    <child :childInfo="parentInfo"></child>
  </div>
</template>

<script>
import Child from './child.vue'
export default {
  name: 'Parent',
  components: {
    Child
  },
  data() {
    return {
      parentInfo: '我是来自父组件的信息'
    }
  }
}
</script>

Kemudian kami mencipta komponen anak, kandungan komponen anak ialah:

<template>
  <div>
    <h2>子组件</h2>
    <p>我是子组件的信息: {{childInfo}}</p>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: ['childInfo']
}
</script>

Dalam komponen induk, kami menghantar data dengan menghantar maklumat komponen induk kepada atribut childInfo komponen anak. Dalam komponen induk, saya menggunakan data komponen induk untuk memberikan maklumat saya sendiri dan juga menyampaikannya kepada komponen anak.

Dalam komponen anak, kami menggunakan pilihan prop untuk menerima data daripada komponen induk. Komponen kanak-kanak memaparkan maklumat mereka sendiri dengan menggunakan childInfo, dan nilai childInfo berasal daripada komponen induk.

Dalam kod di atas, kami menggunakan prop untuk menghantar data dan menggunakan prop dalam komponen anak untuk menerima data. Komunikasi antara komponen dengan cara ini membolehkan perkongsian data antara komponen, dan status data antara komponen boleh diuruskan dalam satu cara.

2. Kaedah $emit dan $on melepasi nilai

Dalam Vue, kita juga boleh menggunakan kaedah emit dan kaedah on untuk komunikasi komponen. Kaedah emit digunakan untuk menghantar mesej, dan kaedah on digunakan untuk menerima mesej. Kaedah ini biasanya digunakan antara komponen yang bukan hubungan ibu bapa-anak.

Mula-mula, kami mencipta contoh vue, bernama event.vue, kodnya adalah seperti berikut:

<template>
  <div>
    <h2>组件间事件通信示例</h2>
    <child></child>
    <grand-child></grand-child>
  </div>
</template>

<script>
import Vue from 'vue'
import Child from './child.vue'
import GrandChild from './grandChild.vue'

export default {
  name: 'Event',
  components: {
    Child,
    GrandChild
  },
  created() {
    //使用$on监听来自子组件的事件
    this.$on('sendMsg', function(message) {
      console.log('父组件接收到来自子组件的消息：' + message)
    })
  }
}
</script>

Dalam komponen induk, kami mendengar ketibaan acara melalui kaedah $on , dan selepas menerima Cetak mesej selepas acara. Penggunaan khusus dilaksanakan dalam fungsi cangkuk kitaran pengisytiharan yang dibuat.

Kemudian, mari kita lihat pelaksanaan kod subkomponen:

<template>
  <div>
    <h3>子组件</h3>
    <button @click="handleClick">发送消息</button>
  </div>
</template>

<script>
export default {
  name: 'Child',
  methods: {
    handleClick() {
      //使用$emit发送事件
      this.$emit('sendMsg', '我是来自子组件的信息')
    }
  }
}
</script>

Dengan cara ini, apabila butang diklik dalam subkomponen, kaedah $emit akan dicetuskan dan nama acara " sendMsg" akan digunakan untuk menghantar induk Komponen menghantar mesej "Saya mesej daripada komponen anak", dan komponen induk boleh mendengar ketibaan acara melalui kaedah $on dan menyelesaikan operasi yang sepadan.

Begitu juga, kami juga boleh melaksanakan komunikasi antara mana-mana dua komponen yang tidak berada dalam perhubungan ibu bapa-anak Kaedah ini menjadikan peristiwa pencetus dan peristiwa mendengar komponen tidak digandingkan. Dengan menggunakan kaedah emit dan on, komunikasi komponen yang lebih fleksibel boleh dicapai.

Ringkasnya, komunikasi antara komponen juga merupakan bahagian yang sangat penting dalam pembangunan Vue. Kemahiran dalam pelbagai kaedah lulus nilai adalah asas kepada penulisan komponen. Melalui contoh kod khusus, artikel ini memperkenalkan dua kaedah lulus nilai biasa dalam Vue: lulus nilai props dan lulus nilai $emit/$on. Kaedah ini boleh menyelaraskan komunikasi antara komponen dengan berkesan dan meningkatkan kebolehgunaan semula kod dan kebolehkomposisian.

Atas ialah kandungan terperinci Analisis contoh pemindahan nilai komponen dalam dokumen Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!