Apakah maksud prop dalam vuejs

Dalam vuejs, prop ialah sifat tersuai yang digunakan oleh komponen induk untuk menghantar data. Subkomponen perlu mengisytiharkan "prop" secara eksplisit dengan pilihan props apabila menggunakan templat bukan rentetan, borang nama prop akan ditukar daripada camelCase kepada kebab-case (dipisahkan sempang).

Persekitaran pengendalian tutorial ini: sistem Windows 7, vue versi 2.9.6, komputer DELL G3.

1. Gunakan Prop untuk menghantar data

Skop kejadian komponen diasingkan. Ini bermakna bahawa data komponen induk tidak boleh dan tidak boleh dirujuk terus dalam templat komponen anak. Anda boleh menggunakan prop untuk menghantar data kepada komponen anak.
prop ialah atribut tersuai yang digunakan oleh komponen induk untuk menghantar data. Subkomponen perlu mengisytiharkan "prop" secara eksplisit dengan pilihan props

Vue.component('child',{
    props:['message'],
    template:&#39;<span>{{ message }}</span>&#39;
})

dan kemudian menghantarnya rentetan biasa:

<child message="hello!"></child>

Keputusan:

hello!

2. camelCase vs.kebab-case

html tidak sensitif huruf. Apabila menggunakan templat bukan rentetan, format nama prop akan ditukar daripada camelCase kepada kebab-case (dipisahkan dengan sempang):

//camelCase
Vue.component('child',{
    props:['myMessage'],
    template:&#39;<span>{{ message }}</span>&#39;
})

//kebab-case
<child my-message="hello!"></child>

Sekali lagi, jika anda menggunakan templat rentetan , jangan' jangan risau tentang sekatan ini.

3. Prop Dinamik

serupa dengan menggunakan v-bind untuk mengikat ciri HTML pada ungkapan Anda juga boleh menggunakan v-bind untuk mengikat nilai secara dinamik props to dalam data komponen induk. Apabila data komponen induk berubah, perubahan itu juga disebarkan kepada komponen anak.

<div>
    <input v-model="parrentMsg">
    <br>
    <child v-bind:my-message="parrentMsg"></child>
</div>

Menggunakan sintaks yang disingkatkan v-bind biasanya lebih mudah:

<child :my-message="parrentMsg"></child>

4. Sintaks literal vs sintaks dinamik

Kerana Ia ialah prop literal yang nilainya dihantar sebagai rentetan "1" dan bukannya sebagai nombor sebenar. Jika anda ingin menghantar nombor JavaScript sebenar, anda perlu menggunakan v-bind supaya nilainya dinilai sebagai ungkapan JavaScript:

5. Aliran data item tunggal

Prop terikat tunggal: apabila sifat komponen induk berubah, ia akan dihantar kepada komponen anak, tetapi bukan sebaliknya. Ini adalah untuk mengelakkan komponen anak daripada mengubah suai keadaan komponen induk secara tidak sengaja - yang akan menjadikan aliran data aplikasi sukar difahami. Pada masa yang sama, ini juga mudah difahami Komponen induk ialah abstraksi peringkat tinggi bagi sub-komponen, yang mewakili bahagian biasa sub-komponen Perubahan dalam data satu komponen tidak akan mengubah abstraksinya. tetapi perubahan dalam abstraksinya mewakili perubahan dalam semua sub-komponen.
Selain itu, setiap kali kumpulan dikemas kini secara beransur-ansur, semua prop komponen kanak-kanak akan dikemas kini kepada nilai terkini. Ini bermakna anda tidak boleh menukar prop dalam komponen kanak-kanak. Jika anda melakukan ini, Vue akan memberikan amaran dalam konsol.
Biasanya terdapat dua kes menukar prop:

1.prop dihantar sebagai nilai awal dan subkomponen hanya menggunakan nilai awalnya sebagai nilai awal data setempat;

2.prop dimasukkan sebagai nilai asal yang perlu diubah.

Lebih tepat lagi, dua situasi ini ialah:

a. Tentukan atribut data setempat dan gunakan nilai awal prop sebagai nilai awal data setempat.

props: [‘initialCounter’], 
 data: function () { 
 return { counter: this.initialCounter} 
 }

    b.定义一个 computed 属性，此属性从 prop 的值计算得出。
   ```
    props: ['size'],
    computed: {
        normalizedSize: function () {
         return this.size.trim().toLowerCase()
     }
    }

6. Pengesahan prop

Komponen boleh menentukan keperluan pengesahan untuk prop. Vue akan mengeluarkan amaran jika keperluan pengesahan tidak dinyatakan. Ini berguna apabila komponen disediakan kepada orang lain.

Apabila prop ialah objek dan bukannya tatasusunan rentetan, ia mengandungi keperluan pengesahan:

Vue.component('example', {
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组／对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

boleh menjadi pembina asli berikut: type

* Rentetan

* Nombor

* Boolean

* Fungsi

* Objek

* Array

juga boleh menjadi satu Custom pembina, gunakan pengesanan type. Apabila pengesahan prop gagal, amaran akan dilemparkan jika anda menggunakan versi pembangunan. instanceof

Cadangan berkaitan: "

tutorial vue.js"

Atas ialah kandungan terperinci Apakah maksud prop dalam vuejs. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!