Penggunaan dan senario biasa acara tersuai Vue

Penggunaan dan senario biasa acara tersuai Vue

Vue.js ialah rangka kerja JavaScript yang popular untuk membina antara muka pengguna. Dalam Vue, kami boleh melaksanakan komunikasi antara komponen melalui acara tersuai. Acara tersuai ialah salah satu ciri yang sangat berguna dalam Vue, membolehkan kami menghantar data antara komponen yang berbeza dan mencetuskan gelagat tertentu. Artikel ini akan memperkenalkan penggunaan dan senario biasa acara tersuai dalam Vue, dan memberikan contoh kod khusus.

1. Penggunaan asas acara tersuai

Dalam Vue, kami boleh menggunakan kaedah $emit untuk mencetuskan acara tersuai. Kaedah $emit menerima dua parameter Parameter pertama ialah nama peristiwa yang akan dicetuskan, dan parameter kedua ialah data yang akan dihantar. Komponen yang menerima peristiwa tersuai perlu menggunakan arahan v-on untuk mendengar peristiwa dan melaksanakan logik berkaitan apabila peristiwa dicetuskan.

Berikut ialah contoh mudah yang menunjukkan cara mencetuskan acara tersuai dalam komponen induk dan menerima serta mengendalikan acara dalam komponen anak:

<!-- 父组件 -->
<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
    <child-component @custom-event="handleEvent"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    triggerEvent() {
      this.$emit('custom-event', 'Hello, world!');
    },
    handleEvent(data) {
      console.log(data); // 输出：Hello, world!
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <h1 id="子组件">子组件</h1>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$emit('custom-event', 'Hello, world!');
  }
}
</script>

Dalam contoh di atas, apabila butang "Pencetus Acara" diklik, ibu bapa komponen Peristiwa tersuai dicetuskan dan rentetan "Hello, dunia!" Subkomponen mendengar peristiwa tersuai melalui arahan v-on dan mencetak data yang diterima dalam kaedah handleEvent.

2. Senario biasa acara tersuai

1. Komunikasi antara komponen ibu bapa dan anak

Acara tersuai sangat mudah untuk memindahkan data dan melaksanakan komunikasi antara komponen ibu bapa dan anak. Komponen induk boleh menghantar data kepada komponen anak melalui acara tersuai dan mendengar peristiwa tersuai yang dicetuskan oleh komponen anak untuk mendapatkan data komponen anak.

2. Komunikasi antara komponen adik-beradik

Jika dua komponen tidak mempunyai hubungan ibu bapa-anak, tetapi perlu berkomunikasi, anda boleh menggunakan bas acara Vue untuk mencapainya. Bas acara ialah tika Vue kosong yang digunakan untuk berkongsi acara antara komponen yang berbeza. Peristiwa tersuai boleh dicetuskan dan diterima antara komponen yang berbeza melalui kaedah $emit dan $vnode.$on.

Berikut ialah contoh yang menunjukkan cara menggunakan bas acara untuk berkomunikasi antara komponen adik-beradik:

<!-- 组件A -->
<template>
  <div>
    <button @click="triggerEvent">触发事件</button>
  </div>
</template>

<script>
import eventBus from './eventBus';

export default {
  methods: {
    triggerEvent() {
      eventBus.$emit('custom-event', 'Hello, world!');
    }
  }
}
</script>

<!-- 组件B -->
<template>
  <div>
    <h1 id="组件B">组件B</h1>
  </div>
</template>

<script>
import eventBus from './eventBus';

export default {
  mounted() {
    eventBus.$on('custom-event', data => {
      console.log(data); // 输出：Hello, world!
    })
  }
}
</script>

<!-- eventBus.js -->
import Vue from 'vue';

const eventBus = new Vue();

export default eventBus;

Dalam contoh di atas, komponen A mencetuskan acara tersuai melalui bas acara, menghantar data. Komponen B mendengar acara tersuai melalui bas acara dan mendapatkan data dalam fungsi panggil balik.

3. Komunikasi antara komponen merentas peringkat

Vue menyediakan menyediakan/menyuntik API untuk mencapai komunikasi antara komponen merentas peringkat. Dengan menggunakan menyediakan dalam komponen induk untuk menyediakan data, dan menggunakan suntikan dalam komponen turunan untuk menyuntik data, komunikasi antara komponen pada mana-mana peringkat dicapai.

Berikut ialah contoh yang menunjukkan cara menggunakan menyediakan dan menyuntik untuk mencapai komunikasi antara komponen peringkat merentas:

<!-- 父组件 -->
<template>
  <div>
    <p>父组件提供的数据：{{ data }}</p>
    <grand-child-component></grand-child-component>
  </div>
</template>

<script>
export default {
  provide() {
    return {
      data: 'Hello, world!'
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <p>子组件注入的数据：{{ injectedData }}</p>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  inject: ['data'],
  computed: {
    injectedData() {
      return this.data;
    }
  }
}
</script>

<!-- 孙子组件 -->
<template>
  <div>
    <p>孙子组件注入的数据：{{ injectedData }}</p>
  </div>
</template>

<script>
export default {
  inject: ['data'],
  computed: {
    injectedData() {
      return this.data;
    }
  }
}
</script>

Dalam contoh di atas, komponen induk menyediakan data "Hello, dunia!" Data disuntik ke dalam komponen cucu melalui suntikan dan digunakan dalam templat.

Ringkasan

Acara tersuai ialah ciri yang sangat berguna dalam Vue, yang boleh melaksanakan komunikasi antara komponen dengan mudah. Dalam Vue, kita boleh menggunakan kaedah $emit untuk mencetuskan acara tersuai dan mendengar acara melalui arahan v-on. Acara tersuai sesuai untuk komunikasi antara komponen ibu bapa-anak, komponen adik-beradik dan komponen merentas peringkat. Saya berharap bilangan besar kod sampel yang disediakan dalam artikel ini dapat membantu anda memahami penggunaan dan senario biasa acara tersuai dalam Vue dengan lebih baik.

Atas ialah kandungan terperinci Penggunaan dan senario biasa acara tersuai Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!