Cara menggunakan komponen tersuai dengan Vue CLI

Di bawah rangka kerja Vue.js, menggunakan komponen tersuai boleh meningkatkan kecekapan pembangunan projek. Vue CLI ialah alat perancah untuk membina projek dengan cepat berdasarkan proses pembangunan pantas Vue CLI membolehkan pembangun membina projek dengan lebih cepat. Artikel ini akan memperkenalkan cara menggunakan komponen tersuai dalam Vue CLI.

1. Cipta projek Vue

Pertama, masukkan arahan berikut dalam terminal untuk mencipta projek Vue:

vue create <project-name>

Di mana, <project-name> ialah projek nama, disesuaikan Itu sahaja. Selepas memasukkan arahan, ikut arahan terminal untuk membuat pilihan dan tunggu projek dibuat.

2 Buat komponen tersuai

Dalam Vue CLI, untuk mencipta komponen tersuai anda perlu mencipta fail xxx.vue dalam folder src/components, di mana xxx boleh digantikan dengan yang tersuai Nama fail dan kandungan fail biasanya kelihatan seperti ini:

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'xxx',
  props: {
    title: String,
    content: String,
  },
};
</script>

<style>
</style>

di mana, teg <template> digunakan untuk menentukan templat komponen, teg <script> ialah kaedah komponen, dan teg <style> ialah CSS gaya komponen.

Dalam fail ini, kami mentakrifkan komponen bernama xxx, yang merangkumi dua sifat: title dan content. Kedua-dua sifat ini adalah jenis rentetan di dalam komponen, dan parameter yang sepadan perlu dimasukkan apabila menggunakan komponen.

3. Menggunakan komponen tersuai

Dalam Vue CLI, menggunakan komponen tersuai memerlukan langkah berikut:

1. Import komponen tersuai ke dalam Komponen Dalam yang diperlukan

Untuk menggunakan komponen tersuai, kita perlu mengimportnya ke dalam komponen yang perlu kita gunakan. Mengambil komponen App.vue sebagai contoh di sini, kami boleh membuka komponen dan mengimport komponen tersuai ke dalam komponen:

<template>
  <div>
    <xxx :title="pageTitle" :content="pageContent"></xxx>
  </div>
</template>

<script>
import xxx from '@/components/xxx.vue';  // 将组件导入

export default {
  name: 'App',
  components: {
    xxx,  // 注册组件
  },
  data() {
    return {
      pageTitle: '自定义组件页面',
      pageContent: '欢迎使用自定义组件',
    };
  },
};
</script>

<style>
</style>

Dalam komponen ini, kami mengimport komponen tersuai ke dalam komponen dan Lulus data ke dalam komponen tersuai melalui :title dan :content.

2. Menggunakan komponen tersuai dalam komponen

Selepas kami mengimport komponen tersuai, kami perlu mendaftarkan komponen yang diperlukan dalam Vue. Mengambil xxx dalam komponen App.vue sebagai contoh, kaedah pendaftaran adalah seperti berikut:

export default {
  name: 'App',
  components: {
    xxx,  // 注册组件
  },
  data() {
    return {
      pageTitle: '自定义组件页面',
      pageContent: '欢迎使用自定义组件',
    };
  },
};

Dengan cara ini, kami boleh menggunakan komponen tersuai kami dalam komponen tersebut.

4. Ringkasan

Melalui langkah di atas, kami boleh berjaya menggunakan komponen tersuai dalam Vue CLI. Kelebihan komponen tersuai ialah ia boleh digunakan semula, mudah untuk pengurusan dan penyelenggaraan, dan juga boleh meningkatkan kecekapan pembangunan projek. Jika anda sedang membangunkan projek Vue, anda juga boleh mencuba menggunakan komponen tersuai, saya percaya ia akan membawa anda banyak bantuan.

Atas ialah kandungan terperinci Cara menggunakan komponen tersuai dengan Vue CLI. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!