Tutorial Bermula VUE3: Menggunakan pemalam Vue.js untuk merangkum komponen kotak mesej

Vue.js ialah salah satu rangka kerja bahagian hadapan yang paling popular dan telah digunakan secara meluas dalam pembangunan web. Ia menyediakan kaedah pembangunan berasaskan komponen dan pengikatan data yang mudah digunakan, cekap dan fleksibel, membolehkan pembangun membina aplikasi Web berkualiti tinggi dengan cepat. Dengan pembangunan berterusan Vue.js, Vue3 juga telah mula dikenali secara meluas dan telah menjadi salah satu alat bahagian hadapan utama dalam era baharu. Dalam artikel ini, kita akan mempelajari cara menggunakan pemalam Vue.js untuk merangkum komponen kotak mesej.

Vue.js dan pemalam

Vue.js menyediakan konsep yang dipanggil pemalam, yang boleh dianggap sebagai komponen dengan fungsi pemasangan dan nyahpasang. Pemalam boleh digunakan untuk menambah kefungsian global atau melanjutkan kefungsian contoh Vue. Contohnya: Vuex, Vue Router dan Vue-i18n juga merupakan pemalam Vue.js.

Struktur pemalam Vue.js adalah sangat mudah dan terdiri daripada fungsi pemasangan. Fungsi pemasangan perlu menerima pembina Vue dan objek pilihan pilihan Untuk memasang pemalam, anda perlu menghantar objek pilihan kepada pembina Vue.

Gunakan pemalam Vue.js untuk merangkum komponen kotak mesej

Kotak mesej ialah komponen UI biasa yang digunakan untuk memaparkan maklumat penting pada halaman. Kami kini akan menggunakan pemalam Vue.js untuk merangkum komponen kotak mesej ringkas.

Dalam Vue.js, komponen mempunyai kitaran hayatnya sendiri dan ia boleh dikendalikan dengan sewajarnya secara berperingkat seperti penciptaan, kemas kini, pemusnahan, dsb. Oleh itu, semasa menulis pemalam, kita harus memanfaatkan fungsi kitaran hayat yang disediakan oleh Vue.js sebaik mungkin. Berikut ialah kod komponen Vue bagi komponen kotak mesej yang ingin kami gunakan:

<template>
    <div v-show="visible" class="message-box">
        <div>{{ message }}</div>
        <button @click="close">Close</button>
    </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      message: '',
    };
  },
  methods: {
    show(message) {
      this.message = message;
      this.visible = true;
    },
    close() {
      this.visible = false;
    },
  },
};
</script>

<style lang="scss">
.message-box {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .15);
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
</style>

Komponen ini terdiri daripada templat templat dan blok kod skrip. Templat templat digunakan untuk mempersembahkan struktur HTML dan menggunakan mekanisme pengikatan data Vue.js untuk memaparkan data. Blok kod skrip mengandungi logik untuk menetapkan data tempatan dan kaedah komponen.

Kini, kita boleh merangkum komponen ini ke dalam pemalam Vue.js dan memasangnya dalam aplikasi menggunakan kaedah Vue.use(). Berikut ialah kod pemalam Vue.js untuk komponen kotak mesej:

const messageBox = {
  install(Vue) {
    Vue.component('message-box', {
      template:
        '<div v-show="visible" class="message-box">' +
        '<div>{{ message }}</div>' +
        '<button @click="close">Close</button>' +
        '</div>',
      data() {
        return {
          visible: false,
          message: '',
        };
      },
      methods: {
        show(message) {
          this.message = message;
          this.visible = true;
        },
        close() {
          this.visible = false;
        },
      },
    });
    Vue.prototype.$message = function (message) {
      const Comp = Vue.extend({
        render(h) {
          return h('message-box', { props: { message } });
        },
      });
      const vm = new Comp().$mount();
      document.body.appendChild(vm.$el);
      vm.$on('close', () => {
        document.body.removeChild(vm.$el);
        vm.$destroy();
      });
    };
  },
};

export default messageBox;

Apabila mengklik "butang" aplikasi, anda boleh menggunakan kaedah Vue.prototype.$message() untuk menggunakan komponen kotak mesej. Kaedah ini memaparkan kotak mesej dengan mencipta contoh komponen yang memanjangkan pembina Vue.js. Kemudian, kami menggunakan kaedah $mount() fungsi cangkuk kitar hayat Vue.js untuk melekapkan komponen ke dalam teg Pada masa ini, kotak mesej akan dipaparkan pada halaman.

Ringkasan

Dalam tutorial ini, kami menggunakan pemalam Vue.js untuk merangkum komponen kotak mesej ringkas. Pemalam Vue.js sangat berkuasa dan boleh digunakan untuk menambah fungsi global atau melanjutkan fungsi contoh Vue Digabungkan dengan konsep kitaran hayat komponen Vue.js, kami boleh merangkum lebih banyak komponen UI dengan mudah. Saya harap tutorial ini dapat membantu anda memahami dengan lebih baik idea pemalam dan komponenisasi Vue.js.

Atas ialah kandungan terperinci Tutorial Bermula VUE3: Menggunakan pemalam Vue.js untuk merangkum komponen kotak mesej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!