Komunikasi komponen Vue: Bagaimana untuk berkomunikasi antara komponen ibu bapa dan anak?

Komunikasi komponen Vue: Bagaimana untuk berkomunikasi antara komponen ibu bapa dan anak?

Vue ialah rangka kerja JavaScript popular yang menyediakan cara berasaskan komponen untuk membina aplikasi web. Dalam perkembangan sebenar, kita sering menghadapi situasi di mana komunikasi antara komponen ibu bapa dan anak diperlukan. Artikel ini akan memperkenalkan beberapa kaedah komunikasi komponen ibu bapa-anak yang biasa digunakan dalam Vue dan memberikan contoh kod yang sepadan.

Props

Props ialah kaedah komunikasi yang paling biasa digunakan antara komponen ibu bapa dan anak dalam Vue. Ia membolehkan komponen induk menghantar data kepada komponen anak. Dalam komponen anak, prop diisytiharkan sebagai tatasusunan atau objek, digunakan untuk menerima data yang diluluskan oleh komponen induk.

<!-- 父组件 -->
<template>
  <div>
    <child-component :message="message"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

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

<!-- 子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  props: ['message']
};
</script>

Dalam contoh di atas, komponen induk menghantar mesej yang dipanggil prop kepada komponen anak. Subkomponen mengisytiharkan harta dengan nama yang sama melalui tatasusunan props untuk menerima data yang diluluskan. Dalam templat komponen anak, data yang diterima boleh dipaparkan melalui ungkapan interpolasi {{ mesej }}.

Emit

Selain menghantar data daripada komponen induk kepada komponen anak, kami selalunya juga perlu menghantar data daripada komponen anak kepada komponen induk atau mencetuskan peristiwa. Vue menyediakan cara untuk komponen kanak-kanak berkomunikasi dengan komponen induk melalui Emit.

<!-- 父组件 -->
<template>
  <div>
    <child-component @rating-updated="updateRating"></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    updateRating(rating) {
      // 处理子组件发出的rating更新事件
      console.log('Rating updated:', rating);
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    ...
    <button @click="updateRating">Update Rating</button>
  </div>
</template>
<script>
export default {
  methods: {
    updateRating() {
      const rating = 5; // 子组件的评分数据
      this.$emit('rating-updated', rating);
    }
  }
};
</script>

Dalam contoh di atas, peristiwa klik butang dalam komponen kanak-kanak mencetuskan kaedah kemas kiniPenilaian dan menghantar nilai tersuai bernama rating-kemas kini kepada komponen induk melalui acara ini.$emit('rating-updated', rating) dan melepasi rating data rating. Gunakan @rating-updated="updateRating" dalam komponen induk untuk mendengar acara kemas kini rating yang dipancarkan oleh komponen anak dan mengendalikan acara dalam kaedah updateRating.

$refs

Kadangkala, kita perlu mengakses terus sifat atau kaedah komponen anak daripada komponen induk. Vue menyediakan atribut $refs untuk melaksanakan kaedah capaian langsung ini.

<!-- 父组件 -->
<template>
  <div>
    <child-component ref="childComponent"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      this.$refs.childComponent.childMethod();
    }
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    Child Component
  </div>
</template>
<script>
export default {
  methods: {
    childMethod() {
      console.log('Child method called.');
    }
  }
};
</script>

Dalam contoh di atas, peristiwa klik butang dalam komponen induk memanggil kaedah callChildMethod Di dalam kaedah, ini.$refs.childComponent digunakan untuk mengakses komponen anak dan memanggil kaedah childMethod bagi komponen anak.

Provide/Inject

Provide/Inject ialah kaedah komunikasi komponen lanjutan yang membolehkan komponen nenek moyang menyediakan data kepada semua komponen keturunan tanpa secara eksplisit melepasinya lapisan demi lapisan. Kaedah komunikasi ini sesuai untuk komunikasi antara komponen peringkat silang.

<!-- 祖先组件 -->
<template>
  <div>
    ...
    <child-component></child-component>
  </div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: 'Hello from ancestor component!'
    };
  }
};
</script>

<!-- 子组件 -->
<template>
  <div>
    <grandchild-component></grandchild-component>
  </div>
</template>
<script>
import GrandchildComponent from './GrandchildComponent.vue';

export default {
  components: {
    GrandchildComponent
  }
};
</script>

<!-- 孙子组件 -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>
<script>
export default {
  inject: ['message']
};
</script>

Dalam contoh di atas, komponen ancestor menyediakan data bernama mesej kepada komponen keturunan melalui kaedah provide. Komponen cucu menyuntik data ini melalui inject: ['message'] dan memaparkannya menggunakan {{ message }} dalam templat.

Di atas memperkenalkan kaedah komunikasi komponen ibu bapa-anak yang biasa digunakan dalam Vue Setiap kaedah mempunyai senario yang berkenaan. Dalam perkembangan sebenar, kaedah komunikasi yang sesuai boleh dipilih mengikut keperluan tertentu. Saya harap artikel ini akan membantu anda memahami komunikasi komponen Vue!

Pautan rujukan:

• [Dokumen Vue - Komunikasi Komponen](https://cn.vuejs.org/v2/guide/components.html#%E7%88%B6%E5%AD%90%E7%BB %84%E4%BB%B6%E9%80%9A%E4%BF%A1)

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