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 < code>@change< /code>Dengar peristiwa change komponen anak Apabila data komponen anak berubah, data komponen induk akan dikemas kini melalui handleChange<. /kod> 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

rrreee

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!