Cara komponen Vue lulus dan menerima atribut prop

Cara komponen Vue lulus dan menerima atribut prop memerlukan contoh kod khusus

Vue ialah rangka kerja JavaScript popular yang digunakan secara meluas dalam pembangunan bahagian hadapan. Dalam Vue, komponen ialah unit asas untuk membina aplikasi. Komponen boleh melepasi sifat (props) dan menerima sifat (props), membenarkan interaksi data antara komponen. Artikel ini akan memperkenalkan secara terperinci cara komponen Vue lulus dan menerima atribut prop, serta memberikan contoh kod khusus.

Meluluskan atribut prop

Dalam Vue, anda boleh menghantar atribut prop dengan menggunakan arahan v-bind pada tag komponen. Arahan v-bind digunakan untuk mengikat satu atau lebih sifat secara dinamik pada ungkapan. Berikut ialah contoh yang menunjukkan cara menghantar atribut prop jenis rentetan:

<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

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

export default {
  data() {
    return {
      parentMessage: "Hello from parent"
    };
  },
  components: {
    ChildComponent
  }
};
</script>

Dalam kod di atas, komponen induk menghantar atribut prop bernama message kepada komponen anak dan mengikat parentMessage data dalam komponen induk. message的prop属性，并绑定了父组件中的parentMessage数据。

在子组件中，可以通过在props选项中声明属性来接收传递的prop属性。以下是子组件的代码示例：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

在上述代码中，props选项中声明了一个名为message的属性，并指定了它的类型为字符串。required: true表示这个属性是必需的，如果父组件没有传递这个属性，将会在控制台输出一个警告。

接收prop属性

一旦在子组件中声明了prop属性，就可以在子组件的模板中使用它。以下是一个例子，展示了如何在子组件中接收和使用prop属性：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true
    }
  }
};
</script>

在上述代码中，{{ message }}用于在子组件的模板中显示传递的prop属性。子组件将会显示Hello from parent。

需要注意的是，一旦声明了prop属性并在子组件中使用，它将被视为只读属性。如果试图在子组件内部修改prop属性的值，Vue会在控制台输出一个警告。

默认值

可以为prop属性设置一个默认值，在父组件不传递这个属性时，将使用默认值。以下是一个例子：

<template>
  <div>
    <child-component></child-component>
  </div>
</template>

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

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

在子组件中，可以通过default选项来设置默认值：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      default: "Default message"
    }
  }
};
</script>

在上述代码中，如果父组件没有传递message属性，子组件将显示Default message

Dalam komponen anak, anda boleh menerima sifat prop yang diluluskan dengan mengisytiharkan harta tersebut dalam pilihan prop. Berikut ialah contoh kod untuk subkomponen:

rrreee

Dalam kod di atas, sifat bernama message diisytiharkan dalam pilihan props dan jenisnya ditentukan sebagai rentetan aksara . required: true menunjukkan bahawa atribut ini diperlukan Jika komponen induk tidak melepasi atribut ini, amaran akan dikeluarkan kepada konsol.

Terima atribut prop🎜🎜Setelah atribut prop diisytiharkan dalam komponen kanak-kanak, ia boleh digunakan dalam templat komponen kanak-kanak. Berikut ialah contoh yang menunjukkan cara menerima dan menggunakan atribut prop dalam komponen anak: 🎜rrreee🎜 Dalam kod di atas, {{ message }} digunakan untuk memaparkan prop yang diluluskan dalam templat komponen anak harta benda. Komponen anak akan memaparkan Hello from parent. 🎜🎜Perlu diambil perhatian bahawa setelah atribut prop diisytiharkan dan digunakan dalam komponen anak, ia akan dianggap sebagai harta baca sahaja. Jika anda cuba mengubah suai nilai atribut prop dalam komponen anak, Vue akan mengeluarkan amaran kepada konsol. 🎜🎜Nilai lalai🎜🎜Anda boleh menetapkan nilai lalai untuk atribut prop Apabila komponen induk tidak melepasi atribut ini, nilai lalai akan digunakan. Berikut ialah contoh: 🎜rrreee🎜Dalam komponen anak, anda boleh menetapkan nilai lalai melalui pilihan lalai: 🎜rrreee🎜Dalam kod di atas, jika komponen induk tidak menghantar mesej Atribut, komponen anak akan memaparkan Mesej lalai. 🎜🎜Ringkasan: 🎜🎜Artikel ini memperkenalkan cara komponen Vue lulus dan menerima atribut prop, serta menyediakan contoh kod khusus. Dalam Vue, sifat prop boleh dihantar kepada komponen anak dengan menggunakan arahan v-bind, dan komponen anak boleh menerimanya dengan mengisytiharkan dan menggunakan sifat ini dalam pilihan props. Selain itu, anda boleh menetapkan nilai lalai untuk sifat prop. Menguasai pengetahuan ini membolehkan pembangun melaksanakan pembangunan komponen dengan lebih berkesan dan merealisasikan interaksi data antara komponen. 🎜

Atas ialah kandungan terperinci Cara komponen Vue lulus dan menerima atribut prop. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!