Apakah kegunaan vuejs prop

Penggunaan vuejs prop: 1. Gunakan Prop untuk memindahkan data, dengan pernyataan seperti "<child message="hello!"></child>"; 2. Gunakan v-bind untuk dinamik mengikat nilai prop kepada data komponen induk dan sebagainya.

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

Penggunaan asas Vuejs Prop

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 sifat tersuai yang digunakan oleh komponen induk untuk menghantar data. Komponen anak perlu mengisytiharkan "prop" secara eksplisit dengan pilihan prop

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

Sama seperti menggunakan v-bind untuk mengikat ciri HTML pada ungkapan, anda juga boleh menggunakan v-bind untuk mengikat nilai props kepada data induk secara dinamik komponen. 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 singkatan v-bind biasanya lebih mudah:

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

4. Sintaks literal vs sintaks dinamik

Oleh kerana ia adalah prop literal, Nilainya diluluskan 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 ialah a pengikatan item 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 anak 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 diluluskan sebagai nilai asal yang perlu diubah.

Lebih tepat lagi, dua situasi ini ialah:

a.定义一个局部data属性，并将prop的初始值作为局部数据的初始值。
“`
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
      }
    }
  }
})

jenis boleh menjadi pembina asli berikut:

* Rentetan

* Nombor

* Boolean

* Fungsi

* Objek

* Array

jenis juga boleh menjadi automatik Tentukan pembina dan gunakan instanceof detection. Apabila pengesahan prop gagal, amaran akan dilemparkan jika anda menggunakan versi pembangunan.

Disyorkan: "

5 pilihan tutorial video vue.js terkini"

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