Penggunaan dan perbezaan antara props dan $emit dalam Vue

Penggunaan dan perbezaan prop dan $emit dalam Vue

Dalam Vue, komunikasi antara komponen adalah konsep yang sangat penting. Vue menyediakan dua kaedah, props dan $emit, untuk melaksanakan komunikasi antara komponen. Artikel ini akan memperkenalkan penggunaan dan perbezaan antara props dan $emit secara terperinci, dan menggambarkannya dengan contoh kod.

1. Props
Props ialah cara untuk komponen induk menghantar data kepada komponen anak. Komponen induk boleh menghantar sebarang jenis data kepada komponen anak melalui prop, dan komponen anak boleh menerima dan menggunakan data ini.

1.1 Tentukan prop dalam komponen induk

Apabila menggunakan komponen anak dalam komponen induk, anda boleh menghantar data kepada komponen anak dengan menambahkan atribut pada label komponen anak. Contohnya:

<template>
  <div>
    <!-- 使用子组件，并通过props传递数据 -->
    <ChildComponent :message="message"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

Dalam contoh ini, kami menghantar data kepada komponen anak dengan menambahkan atribut yang dipanggil mesej pada teg ChildComponent dan menetapkan nilai kepada pembolehubah mesej dalam komponen induk.

1.2 Terima prop dalam komponen anak

Dalam komponen anak, anda boleh menerima data yang diluluskan oleh komponen induk melalui pilihan prop. Contohnya:

<template>
  <div>
    <!-- 子组件中使用props -->
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: String
  }
}
</script>

Dalam contoh ini, kami menggunakan pilihan props untuk menentukan sifat yang dipanggil mesej dan menentukan jenisnya sebagai String. Komponen anak boleh terus menggunakan atribut mesej untuk mendapatkan data yang diluluskan oleh komponen induk.

2. $emit
$emit ialah cara untuk komponen anak menghantar data kepada komponen induk. Komponen anak boleh mencetuskan peristiwa tersuai melalui $emit dan menghantar data kepada komponen induk.

2.1 Mencetuskan peristiwa dalam komponen kanak-kanak

Dalam komponen kanak-kanak, anda boleh menggunakan ini.$emit untuk mencetuskan peristiwa tersuai dan menghantar data kepada komponen induk. Contohnya:

<template>
  <div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      // 通过$emit触发一个自定义事件，并向父组件传递数据
      this.$emit('message', 'Hello Vue!')
    }
  }
}
</script>

Dalam contoh ini, kami mencetuskan acara tersuai bernama mesej dengan menambahkan pendengar acara @click pada butang, menggunakan ini.$emit dalam fungsi pengendali acara dan menghantar mesej bernama 'Hello Vue!'s data.

2.2 Terima peristiwa dalam komponen induk

Dalam komponen induk, anda boleh mendengar peristiwa yang dicetuskan oleh komponen anak dengan menambahkan v-on pada label komponen anak dan menerima data yang diluluskan dalam fungsi pengendali acara yang sepadan. Contohnya:

<template>
  <div>
    <!-- 监听子组件的自定义事件 -->
    <ChildComponent @message="onMessage"></ChildComponent>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    onMessage(data) {
      // 在事件处理函数中接收子组件传递过来的数据
      console.log('收到消息:', data)
    }
  }
}
</script>

Dalam contoh ini, kami menggunakan v-on pada teg ChildComponent untuk mendengar mesej acara tersuai komponen kanak-kanak dan menerima data yang diluluskan oleh komponen kanak-kanak dalam pengendali acara onMessage.

3 Perbezaan antara props dan $emit

props dan $emit kedua-duanya digunakan untuk melaksanakan komunikasi antara komponen, tetapi terdapat perbezaan tertentu dalam penggunaan dan arah tindakannya.

Props ialah cara komponen induk menghantar data kepada komponen anak Data dihantar kepada komponen anak dalam bentuk atribut, dan komponen anak boleh menggunakan pilihan props untuk mengisytiharkan atribut yang perlu mereka terima, dan kemudian menggunakan data ini seperti biasa. sifat-sifat.

$emit ialah cara komponen anak menghantar data kepada komponen induk Komponen anak boleh menggunakan ini.$emit untuk mencetuskan peristiwa tersuai dan menghantar data kepada komponen induk, dan kemudian menggunakan v-on dalam komponen induk untuk. dengar komponen kanak-kanak untuk mencetuskan peristiwa dan menerima data dalam fungsi pengendalian peristiwa yang sepadan.

Aliran data props ialah aliran sehala daripada komponen induk kepada komponen anak, dan komponen induk menghantar data kepada komponen anak. Aliran data $emit ialah aliran sehala daripada komponen anak kepada komponen induk Komponen anak menghantar data kepada komponen induk dengan mencetuskan peristiwa.

Ringkasan:
props digunakan oleh komponen induk untuk menghantar data kepada komponen anak Data dihantar kepada komponen anak dalam bentuk atribut, dan komponen anak menerima data melalui pilihan prop.
$emit digunakan oleh komponen anak untuk menghantar data kepada komponen induk Komponen anak mencetuskan peristiwa tersuai melalui ini.$emit dan menghantar data kepada komponen induk Komponen induk menggunakan v-on untuk mendengar acara dicetuskan oleh komponen kanak-kanak dan bertindak balas kepada peristiwa sekiranya Menerima data dalam fungsi pemprosesan.

Di atas adalah pengenalan terperinci tentang penggunaan dan perbezaan prop dan $emit dalam Vue, saya harap ia akan membantu anda memahami komunikasi antara komponen.

Atas ialah kandungan terperinci Penggunaan dan perbezaan antara props dan $emit dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!