Prop
Halaman ini menganggap anda telah membaca Asas Komponen. Jika anda masih belum tahu banyak tentang komponen, saya syorkan anda membacanya terlebih dahulu.
Direktori
- Lulus dalam semua sifat objek
- Sehala Aliran data letak/gabungkan ciri sedia ada
- Prop case (camelCase vs kebab-case) ditafsirkan dalam huruf besar dalam HTML, ditafsirkan semua huruf besar dalam HTML huruf kecil. Ini bermakna apabila anda menggunakan templat dalam DOM, nama prop camelCase perlu menggunakan nama kebab-case yang setara:
Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' })<!-- 在 HTML 中是 kebab-case 的 --> <blog-post post-title="hello!"></blog-post>
- Sekali lagi, jika anda menggunakan templat rentetan, maka sekatan ini tidak wujud. . Pada ketika ini, anda boleh menyenaraikan prop sebagai objek dengan nama dan nilai nama dan jenis props masing-masing:
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']
Ini bukan sahaja menyediakan dokumentasi untuk komponen anda, tetapi juga menyediakan dokumentasi jika mereka menemui jenis yang salah. Gesa pengguna daripada konsol JavaScript penyemak imbas. Anda akan melihat pemeriksaan taip dan pengesahan prop lain di seluruh halaman ini.
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}Dalam dua contoh di atas, nilai yang kami hantar adalah daripada jenis rentetan, tetapi sebenarnya sebarang jenis nilai boleh dihantar ke prop.
Lepaskan nombor<blog-post title="My journey with Vue"></blog-post>
v-bind 动态赋值，例如：
<!-- 动态赋予一个变量的值 --> <blog-post v-bind:title="post.title"></blog-post> <!-- 动态赋予一个复杂表达式的值 --> <blog-post v-bind:title="post.title + ' by ' + post.author.name" ></blog-post>
在上述两个示例中，我们传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个 prop。
传入一个数字
<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <blog-post v-bind:likes="42"></blog-post> <!-- 用一个变量进行动态赋值。--> <blog-post v-bind:likes="post.likes"></blog-post>
传入一个布尔值
<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。--> <blog-post is-published></blog-post> <!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <blog-post v-bind:is-published="false"></blog-post> <!-- 用一个变量进行动态赋值。--> <blog-post v-bind:is-published="post.isPublished"></blog-post>
传入一个数组
<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post> <!-- 用一个变量进行动态赋值。--> <blog-post v-bind:comment-ids="post.commentIds"></blog-post>
传入一个对象
<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue -->
<!-- 这是一个 JavaScript 表达式而不是一个字符串。-->
<blog-post
v-bind:author="{
name: 'Veronica',
company: 'Veridian Dynamics'
}"
></blog-post>
<!-- 用一个变量进行动态赋值。-->
<blog-post v-bind:author="post.author"></blog-post>传入一个对象的所有属性
如果你想要将一个对象的所有属性都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post
post: {
id: 1,
title: 'My Journey with Vue'
} Lepas dalam tatasusunan Lepaskan objek<blog-post v-bind="post"></blog-post>
<blog-post
v-bind:id="post.id"
v-bind:title="post.title"
></blog-post>
="all-attributes">Masukkan semua atribut objek
Jika anda ingin memasukkan semua atribut objek sebagai prop, anda boleh Gunakan v-bind tanpa parameter (menggantikan v-bind:prop-name). Contohnya, untuk objek props: ['initialCounter'],
data: function () {
return {
counter: this.initialCounter
}
} templat berikut:
props: ['size'],
computed: {
normalizedSize: function () {
return this.size.trim().toLowerCase()
}
} bersamaan dengan: Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
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 ['success', 'warning', 'danger'].indexOf(value) !== -1
}
}
}
})
Sehala aliran data
function Person (firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}🎜 2. 🎜Prop ini diluluskan sebagai nilai primitif dan perlu ditukar. 🎜Dalam kes ini, adalah lebih baik untuk menggunakan nilai prop ini untuk mentakrifkan harta yang dikira: 🎜Vue.component('blog-post', {
props: {
author: Person
}
})🎜🎜Perhatikan bahawa dalam JavaScript objek dan tatasusunan dihantar melalui rujukan, jadi untuk prop tatasusunan atau jenis objek, Menukar objek atau tatasusunan itu sendiri dalam komponen anak akan mempengaruhi keadaan komponen induk. 🎜🎜🎜🎜🎜Pengesahan Prop
Kami boleh menentukan keperluan pengesahan untuk prop komponen, seperti jenis yang anda tahu. Jika keperluan tidak dipenuhi, Vue akan memberi amaran kepada anda dalam konsol penyemak imbas. Ini amat membantu apabila membangunkan komponen yang akan digunakan oleh orang lain.
Untuk menyesuaikan cara prop disahkan, anda boleh menyediakan objek dengan keperluan pengesahan untuk nilai dalam props dan bukannya tatasusunan rentetan. Contohnya: props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：
<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如
data、computed等) 在default或validator函数中是不可用的。
类型检查
type 可以是下列原生构造函数中的一个：
StringNumberBooleanArrayObjectDateFunctionSymbol
额外的，type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。例如，给定下列现成的构造函数：
<input type="date" class="form-control">
你可以使用：
<bootstrap-date-input data-date-picker="activated" class="date-picker-theme-dark" ></bootstrap-date-input>
来验证 author prop 的值是否是通过 new Person 创建的。
非 Prop 的特性
一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性。
因为显式定义的 prop 适用于向一个子组件传入信息，然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上。
例如，想象一下你通过一个 Bootstrap 插件使用了一个第三方的 <bootstrap-date-input> 组件，这个插件需要在其 <input> 上用到一个 data-date-picker 特性。我们可以将这个特性添加到你的组件实例上：
Vue.component('my-component', {
inheritAttrs: false,
// ...
})然后这个 data-date-picker="activated" 特性就会自动添加到 <bootstrap-date-input> 的根元素上。
替换/合并已有的特性
想象一下 <bootstrap-date-input>
{
required: true,
placeholder: 'Enter your username'
}Apabila pengesahan prop gagal, Vue (versi binaan persekitaran pembangunan) akan menjana amaran konsol. 🎜🎜Perhatikan bahawa prop tersebut akan disahkan 🎜 sebelum tika komponen dicipta 🎜, jadi sifat tika itu (seperti🎜🎜data ,dikira , dsb. ) berada dalam fungsidefaultatauvalidatortidak tersedia. 🎜
🎜Type check🎜🎜🎜🎜 🎜Ganti/gabungkan ciri sedia ada🎜🎜🎜🎜Bayangkan Untuk menyesuaikan tema untuk pemalam pemilih tarikh kami, kami mungkin perlu menambah nama kelas khas seperti ini: Dalam kes ini, kami mentakrifkan dua 对于绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 禁用特性继承 如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 这尤其适合配合实例的 有了 注意： type boleh menjadi asli berikut membina Salah satu fungsi: 🎜
🎜Selain itu, type juga boleh menjadi pembina tersuai dan disemak melalui instanceof. Contohnya, memandangkan pembina siap berikut: 🎜Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
template: `
<label>
{{ label }}
<input
v-bind="$attrs"
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
</label>
`
})🎜 anda boleh menggunakan: 🎜<base-input
v-model="username"
required
placeholder="Enter your username"
></base-input>
🎜 untuk mengesahkan bahawa nilai prop author telah dicipta melalui Orang baharu. 🎜🎜
🎜🎜🎜Ciri-ciri Bukan Prop🎜🎜🎜🎜🎜Ciri bukan prop bermakna ia dihantar kepada komponen, tetapi komponen itu tidak mempunyai ciri definisi prop yang sepadan. 🎜🎜Oleh kerana prop yang ditakrifkan secara eksplisit sesuai untuk menghantar maklumat kepada subkomponen, bagaimanapun, pengarang pustaka komponen tidak boleh sentiasa meramalkan senario apa komponen itu akan digunakan. Inilah sebabnya mengapa komponen boleh menerima atribut sewenang-wenangnya, dan atribut ini akan ditambahkan pada elemen akar komponen. 🎜🎜Sebagai contoh, bayangkan anda menggunakan komponen
<bootstrap-date-input> pihak ketiga melalui pemalam Bootstrap ini perlu disertakan dalam < ;input> Ciri data-date-picker digunakan. Kami boleh menambah atribut ini pada contoh komponen anda: 🎜rrreee🎜 Kemudian atribut data-date-picker="activated" ini akan ditambahkan secara automatik pada <bootstrap-date-input> ; pada elemen akar. 🎜🎜 adalah seperti ini: 🎜rrreee
🎜class 的值：form-control，这是在组件的模板内设置好的date-picker-theme-dark，这是从组件的父级传入的type="text" 就会替换掉 type="date" 并把它破坏！庆幸的是，class 和 style 特性会稍微智能一些，即两边的值会被合并起来，从而得到最终的值：form-control date-picker-theme-dark。inheritAttrs: false。例如：$attrs 属性使用，该属性包含了传递给一个组件的特性名和特性值，例如：inheritAttrs: false 和 $attrs，你就可以手动决定这些特性会被赋予哪个元素。在撰写基础组件的时候是常会用到的：inheritAttrs: false 选项不会影响 style 和 class
Untuk kebanyakan ciri, ia disediakan secara luaran kepada Nilai komponen akan menggantikan nilai yang ditetapkan secara dalaman dalam komponen tersebut. Jadi jika anda memasukkan type="text" ia akan menggantikan type="date" dan memusnahkannya! Nasib baik, atribut class dan style sedikit lebih pintar, iaitu nilai pada kedua-dua belah digabungkan untuk mendapatkan nilai akhir: form-control date- pemilih-tema-gelap.
Dilumpuhkan warisan ciri🎜🎜Jika anda Jika anda tidakmahu elemen akar komponen mewarisi atribut, anda boleh menetapkan inheritAttrs: false dalam pilihan komponen. Contohnya: 🎜rrreee🎜Ini amat sesuai digunakan dengan atribut $attrs instance, yang mengandungi nama atribut dan nilai atribut yang dihantar kepada komponen, contohnya: 🎜rrreee🎜Dengan inheritAttrs : false dan $attrs, anda boleh menentukan secara manual elemen yang mana atribut ini akan diberikan. MenulisKomponen asas sering digunakan: 🎜rrreee
🎜Nota: PilihaninheritAttrs: falsetidak akan menjejaskan pengikatanstyledanclass. 🎜🎜🎜Mod ini membolehkan anda menggunakan komponen asas lebih seperti elemen HTML mentah tanpa perlu risau tentang elemen mana elemen akar sebenar: 🎜rrreee🎜🎜🎜
