Pengenalan terperinci tentang cara membahagikan komponen dalam Vue

Dengan pembangunan berterusan teknologi bahagian hadapan, Vue telah menerima lebih banyak perhatian dan telah menjadi salah satu rangka kerja yang paling dihormati dalam pembangunan bahagian hadapan. Kecekapan Vue dan teknologi DOM maya menjadikannya berkesan digunakan dalam pembangunan sebenar. Bahagian dalam Vue ialah bahagian yang sangat penting dalam bahagian komponen Vue. Artikel ini akan memperkenalkan secara terperinci cara membahagikan komponen dalam Vue.

1. Konsep asas komponen

Dalam Vue, komponen merujuk kepada contoh Vue yang boleh diguna semula, sama seperti elemen tersuai. Komponen boleh menerima prop pada paparan untuk menyesuaikan kefungsian elemen. Komponen mengandungi data dan kaedah dan boleh mewakili sebahagian daripada keseluruhan paparan. Sebagai contoh, komponen troli beli-belah boleh mewakili sebahagian daripada paparan aplikasi keseluruhan. Komponen boleh menerima data daripada komponen induk dan juga boleh menghantar data kepada komponen induk.

2. Cara komponen dibahagikan

Dalam Vue, komponen boleh dibahagikan kepada komponen global dan komponen tempatan.

• Komponen global

Komponen global ialah komponen yang boleh digunakan di mana-mana sahaja Ia didaftarkan pada objek konfigurasi global Vue, dan skop setiap contoh Vue adalah Mengandungi komponen global. . Pendaftaran komponen tersebut dicapai melalui kaedah Vue.component(). Secara umumnya, komponen global hanya digunakan untuk mentakrifkan fungsi global, seperti bar navigasi bawah, kotak carian atas dan komponen biasa yang lain. Kod sampel adalah seperti berikut:

Vue.component('header-bar', {
  template: '<div>这是一个头部组件</div>'
})

• Komponen tempatan

Komponen tempatan ialah komponen yang hanya boleh digunakan dalam komponen tertentu ia didaftarkan pada Vue instance atau a Dalam contoh komponen, ia hanya boleh digunakan dalam skop contoh. Komponen sedemikian didaftarkan dengan menghantar objek pilihan komponen sebagai salah satu sifat pilihan komponen tempatan. Secara umum, komponen tempatan boleh menentukan komponen mereka sendiri untuk setiap halaman Contohnya, jika halaman memerlukan komponen tertentu, ia boleh ditakrifkan sebagai komponen setempat. Kod sampel adalah seperti berikut:

var vm = new Vue({
  el: '#app',
  components: {
    'header-bar': {
      template: '<div>这是一个头部组件</div>'
    },
    'content-body': {
      template: '<div>这是一个内容组件</div>'
    }
  }
})

3. Kaedah penghantaran nilai komponen

Akan ada interaksi dan pemindahan data antara komponen untuk memindahkan data dengan berkesan, terdapat banyak komponen dalam komponen kaedah pemindahan data.

• Komponen induk yang menghantar nilai kepada komponen anak

Komponen induk yang menghantar nilai kepada komponen anak ialah aliran data sehala, menghantar data kepada komponen anak melalui prop. Dalam Vue, komponen kanak-kanak mengisytiharkan prop bebas mereka sendiri sebagai sifat. Kod sampel adalah seperti berikut:

Komponen induk:

<template>
  <div>
    <h3>父组件</h3>
    <my-child :title="title" :content="content"></my-child>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        title: '这是标题',
        content: '这是内容'
      }
    }
  }
</script>

Komponen anak:

<template>
  <div>
    <h3>子组件</h3>
    <p>{{title}}</p>
    <p>{{content}}</p>
  </div>
</template>
<script>
  export default {
    props: {
      title: {
        type: String
      },
      content: {
        type: String
      }
    }
  }
</script>

• Komponen anak menghantar nilai kepada komponen induk

Menyalurkan nilai daripada komponen anak kepada komponen induk ialah aliran data sehala daripada komponen anak kepada komponen induk melalui acara tersuai. Dalam Vue, gunakan kaedah $emit() untuk menghantar peristiwa dan data kepada komponen induk. Kod sampel adalah seperti berikut:

Komponen induk:

<template>
  <div>
    <h3>父组件</h3>
    <my-child @child-click="childClickHandler"></my-child>
    <p>{{info}}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        info: ''
      }
    },
    methods: {
      childClickHandler(val) {
        this.info = val
      }
    }
  }
</script>

Komponen kanak-kanak:

<template>
  <div>
    <h3>子组件</h3>
    <button @click="clickHandler">点击我</button>
  </div>
</template>
<script>
  export default {
    methods: {
      clickHandler() {
        this.$emit('child-click', '这是子组件的信息')
      }
    }
  }
</script>

Ringkasan

Pembangunan berasaskan komponen dalam Vue adalah penting untuk projek Pembangunan, pengubahsuaian dan penyelenggaraan semuanya memainkan peranan yang besar. Dalam pembangunan sebenar, pembahagian komponen yang munasabah dan pemindahan data antara komponen mengikut keperluan adalah kaedah yang berkesan untuk mencapai pengalaman pembangunan dan komponenisasi yang baik. Menggunakan Vue untuk pembangunan komponen membahagikan keseluruhan aplikasi kepada bahagian kecil yang boleh digunakan semula, menjadikannya lebih cekap dan boleh dipercayai.

Atas ialah kandungan terperinci Pengenalan terperinci tentang cara membahagikan komponen dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!