Bagaimana untuk melaksanakan komunikasi antara komponen ibu bapa dan anak dalam Vue?

Dalam Vue, komponen merupakan bahagian penting dalam membina antara muka pengguna Mereka boleh menguraikan antara muka kepada bahagian yang lebih kecil dan boleh digunakan semula. Memandangkan halaman mungkin mengandungi berbilang komponen, komunikasi antara komponen menjadi penting. Terutamanya komunikasi antara komponen ibu bapa dan anak.

Vue melaksanakan komunikasi antara komponen ibu bapa dan anak melalui props dan $emit. Artikel ini akan memperkenalkan anda kepada kedua-dua kaedah.

1. Props

Props ialah cara komponen induk dalam Vue menghantar data kepada komponen anak. props ialah tatasusunan yang menyimpan atribut data untuk dihantar kepada komponen anak. Dalam komponen anak, gunakan prop untuk menerima data yang dihantar daripada komponen induk.

Penggunaan prop: Pertama, tentukan prop dalam komponen induk Kodnya adalah seperti berikut:

<template>
  <child :message="parentMsg"/>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      parentMsg: "父组件的数据",
    };
  },
  components: {
    Child,
  },
  props: ["parentMsg"], //在父组件中定义props
};
</script>

Dalam kod di atas, komponen induk menghantar mesej bernama kepada komponen anak melalui. props.

Kemudian, terima prop dalam komponen anak:

<template>
  <h2>{{ message }}</h2>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true, //props接收的属性必须有值
    },
  },
};
</script>

Dalam komponen anak, atribut mesej yang diluluskan oleh komponen induk diterima melalui props.

Pada masa ini, nilai "data komponen induk" akan dipaparkan pada halaman komponen induk.

2. $emit

$emit ialah cara sub-komponen dalam Vue menghantar mesej kepada komponen induk. Apabila peristiwa tertentu berlaku dalam komponen anak, kaedah peristiwa komponen induk boleh dicetuskan melalui $emit. Parameter pertama kaedah $emit ialah nama peristiwa yang akan dicetuskan, dan parameter kedua ialah parameter yang akan dihantar kepada komponen induk.

Penggunaan $emit: Pertama, tentukan kaedah acara dalam komponen anak Apabila peristiwa dicetuskan, panggil kaedah $emit untuk menghantar mesej kepada komponen induk >

<template>
  <button @click="onClick">点击传递消息到父组件</button>
</template>

<script>
export default {
  methods: {
    onClick() {
      this.$emit("child-msg", "子组件的数据");
    },
  },
};
</script>

Dalam kod di atas, komponen anak mentakrifkan kaedah acara onClick Apabila butang diklik, acara bernama child-msg akan dicetuskan melalui kaedah $emit dan parameter "data komponen anak" akan dihantar. .

Kemudian, dengar acara ini dalam komponen induk:

<template>
  <div>
    <div>{{ message }}</div>
    <child @child-msg="getChildMsg"></child>
  </div>
</template>

<script>
import Child from "./Child.vue";
export default {
  data() {
    return {
      message: "",
    };
  },
  components: {
    Child,
  },
  methods: {
    getChildMsg(msg) {
      this.message = msg; //监听子组件的事件，获取传递过来的参数
    },
  },
};
</script>

Dalam kod di atas, komponen induk menggunakan simbol @ untuk mendengar peristiwa komponen anak. Sebaik sahaja komponen kanak-kanak mencetuskan peristiwa mesej kanak-kanak, komponen induk bertindak balas kepada peristiwa itu dan menerima data yang diluluskan oleh komponen kanak-kanak melalui kaedah getChildMsg, dan kemudian memaparkan data pada halaman.

Melalui dua kaedah di atas, komunikasi antara komponen ibu bapa dan anak boleh dicapai dalam Vue. Kod ini ringkas, mudah difahami dan mudah diselenggara, yang boleh meningkatkan kecekapan pembangunan komponen.

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