Contoh pengenalan: Vue melaksanakan komunikasi antara komponen anak dan ibu bapa melalui kaedah $emit

Artikel ini membawa anda pengetahuan yang berkaitan tentang vue, yang terutamanya memperkenalkan isu berkaitan tentang $emit Dalam komponen anak, $emit digunakan untuk memanggil kaedah dalam komponen induk bersama-sama, saya harap ia akan membantu semua orang.

[Cadangan berkaitan: tutorial video javascript, tutorial vue.js]

Vue boleh lulus prop Sifat, menghantar parameter daripada komponen induk kepada komponen anak, agak mudah.

Jika anda ingin menghantar parameter daripada komponen anak kepada komponen induk, anda perlu menggunakan kaedah komponen induk, dan pada masa yang sama memanggil kaedah dalam komponen induk melalui $emit dalam komponen kanak-kanak.

Berikut ialah demonstrasi terperinci.

Senario

Dalam situasi yang sama, komponen induk ialah komponen senarai berita dan komponen anak ialah komponen kandungan berita. Klik butang padam dalam komponen anak untuk menghantar maklumat berita yang dipadamkan kepada komponen induk, dengan itu mengemas kini senarai berita.

Pembangunan komponen induk

Komponen induk digunakan untuk memaparkan senarai berita Kod adalah seperti berikut:

<template>
  <div>
    <template>
      <newscontent></newscontent>
    </template>
  </div>
</template>
<script>
import NewsContent from &#39;@/components/NewsContent.vue&#39;;
export default {
  name: "MyCounter",
  data() {
    return {
      list: [
        {
          title: "今天天气不错",
          author: "张三"
        },
        {
          title: "今天下雨了",
          author: "李四"
        }
      ]
    }
  },
  components: {
    NewsContent
  },
  methods: {
    removeNews(news) {
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].title == news.title && this.list[i].author == news.author) {
          this.list.splice(i, 1);
          break;
        }
      }
    }
  }
}
</script>

Terdapat beberapa perkara yang perlu diberi perhatian:

• Komponen anak didaftarkan dalam komponen induk

  NewsContent

• Kaedah pemadaman berita ditakrifkan dalam komponen induk apabila berita diluluskan tajuk dan pengarang kedua-duanya sepadan, Kemudian padamkan berita yang sepadan daripada senarai berita.

• Lepaskan parameter komponen induk kepada komponen anak melalui

  . :news="item"

• Paskan kaedah komponen induk kepada komponen anak melalui

  Ambil perhatian bahawa komponen anak memanggil kaedah komponen induk dan lulus parameter melalui kaedah ini. @removeNews="removeNews"

Pembangunan subkomponen

Subkomponen memanggil kaedah

yang diluluskan oleh komponen induk melalui $emit Kodnya adalah seperti berikut: removeNews

<template>
  <div>
    <p>
      新闻标题：{{news.title}}--新闻作者：{{news.author}}
      <button>删除</button>
    </p>
  </div>
</template>
<script>
export default {
  name: "MyCounter",
  props: [&#39;news&#39;],
  mounted() {
    console.log(this.news);
  },
  methods: {
    btnDelete(news) {
      this.$emit("removeNews", news);     
    }
  }
}
</script>

Ambil perhatian bahawa apabila butang padam di belakang berita diklik, kaedah btnDelete dicetuskan, dan kandungan kaedah btnDelete ialah

, iaitu kaedah removeNews komponen induk dipanggil dan berita parameter diluluskan. this.$emit("removeNews", news);

Jadi selepas mengklik butang padam komponen anak, berita yang sepadan dalam komponen induk dipadamkan.

Komponen anak memanggil kaedah komponen induk untuk merealisasikan komunikasi antara komponen anak dan ibu bapa. Komponen induk perlu menghantar kaedah kepada komponen anak terlebih dahulu dan komponen anak memanggil kaedah yang diluluskan melalui $emit, yang tidak terlalu rumit.

1.

dan props mempunyai data sehala hanya boleh menghantar data daripada komponen induk kepada komponen anak dan tidak mempunyai fungsi menghantar data daripada anak kepada ibu bapa. $attrs

2. Dalam

, kita boleh menggunakan vueperistiwa tersuai untuk melaksanakan komponen anak untuk menghantar data kepada komponen induk.

Acara tersuai

1 Gunakan arahan

pada komponen anak untuk mengikat acara tersuai v-on

getChildData(data){
	//data是子组件触发事件传递的参数
	console.log('child data is' +data)
}
<child-c></child-c>

2 untuk nama acara Split

-

untuk mencetuskan acara

$emit 1. Setiap tika komponen mempunyai kaedah

untuk mencetuskan acara tersuai.

$emit2.

Menerima dua parameter

$emit(fn,arg) (1) Parameter pertama ialah nama peristiwa yang dicetuskan. Sila ambil perhatian bahawa ia mestilah sama dengan nama acara yang ditentukan.

(2) Parameter kedua ialah data yang dihantar kepada komponen induk. Ia ialah parameter pertama fungsi acara yang ditakrifkan dalam komponen induk.

[Cadangan berkaitan:

this.$emit('get-child-data','hello father')

tutorial video javascript

, tutorial vue.js]

Atas ialah kandungan terperinci Contoh pengenalan: Vue melaksanakan komunikasi antara komponen anak dan ibu bapa melalui kaedah $emit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!