Bagaimana untuk menggunakan $parent dan $children untuk berkomunikasi antara komponen ibu bapa dan anak dalam Vue?

Bagaimana untuk menggunakan $ibu bapa dan $anak untuk komunikasi komponen ibu bapa-anak dalam Vue?

Dalam Vue, komponen ialah unit asas untuk membina aplikasi. Dalam proses pembangunan, komunikasi antara komponen adalah keperluan yang sangat biasa. Vue menyediakan beberapa kaedah terbina dalam untuk melaksanakan komunikasi antara komponen, termasuk $parent dan $children.

$ibu bapa merujuk kepada komponen induk bagi komponen semasa dan $anak merujuk kepada semua komponen anak bagi komponen semasa. Melalui mereka, kami boleh menghantar data dan kaedah panggilan antara komponen ibu bapa dan anak.

Seterusnya, kami akan menggunakan contoh mudah untuk menunjukkan cara menggunakan $ibu bapa dan $anak untuk komunikasi komponen ibu bapa-anak.

Pertama, kita perlu mencipta komponen induk dan komponen anak. Dalam komponen induk, kami akan mencipta sifat data dan menyerahkannya kepada komponen anak. Komponen anak akan mengubah suai data ini dan menghantar semula data yang diubah suai kepada komponen induk.

Kod komponen induk adalah seperti berikut:

<template>
  <div>
    <h2>父组件</h2>
    <p>父组件的数据：{{ parentData }}</p>
    <child-component :childData="parentData" @change="handleChange"></child-component>
  </div>
</template>

<script>
import ChildComponent from "./ChildComponent.vue"

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: "父组件初始数据"
    }
  },
  methods: {
    handleChange(newData) {
      this.parentData = newData
    }
  }
}
</script>

Dalam komponen induk, kami menghantar data komponen induk parentData kepada komponen anak ChildComponent, dan lulus @changeDengar peristiwa change komponen anak Apabila data komponen anak berubah, data komponen induk akan dikemas kini melalui handleChange<.> kaedah. <code>parentData传递给子组件ChildComponent，并通过@change监听子组件的change事件，当子组件的数据发生变化时，将通过handleChange方法更新父组件的数据。

接下来，我们来看一下子组件的代码：

<template>
  <div>
    <h4>子组件</h4>
    <p>子组件的数据：{{ childData }}</p>
    <button @click="handleClick">修改父组件数据</button>
  </div>
</template>

<script>
export default {
  props: {
    childData: {
      type: String,
      required: true
    }
  },
  methods: {
    handleClick() {
      const newData = this.childData + "（已修改）"
      this.$emit("change", newData)
    }
  }
}
</script>

在子组件中，我们接收父组件传递过来的数据childData作为props，并渲染到页面上。当点击按钮时，通过handleClick方法修改子组件的数据，然后通过$emit方法触发change

Seterusnya, mari lihat kod komponen kanak-kanak:

rrreee

Dalam komponen kanak-kanak, kami menerima data childData yang diluluskan oleh komponen induk sebagai prop dan memaparkannya pada halaman. Apabila butang diklik, data subkomponen diubah suai melalui kaedah handleClick dan kemudian peristiwa change dicetuskan melalui $emit kaedah dan data yang diubah suai dihantar kepada komponen induk.

Pada ketika ini, kami telah menyelesaikan pemindahan data dan komunikasi antara komponen ibu bapa dan anak. Apabila kita memaparkan komponen induk pada halaman, kita dapat melihat bahawa data komponen induk dan data komponen anak dipaparkan dengan betul, dan apabila butang dalam komponen anak diklik, data komponen induk akan menjadi diubah suai dengan sewajarnya. 🎜🎜Melalui contoh di atas, kita dapat melihat bahawa menggunakan $parent dan $children boleh memindahkan dan menyampaikan data dengan mudah antara komponen ibu bapa dan anak. Walau bagaimanapun, disebabkan oleh gandingan tertentu antara komponen ibu bapa dan anak, dalam proses pembangunan sebenar, kita perlu memilih kaedah komunikasi yang sesuai berdasarkan keperluan dan senario tertentu. 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan $parent dan $children untuk berkomunikasi antara komponen ibu bapa dan anak dalam Vue?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!