vue2.0 prop的使用
生活随笔
收集整理的這篇文章主要介紹了
vue2.0 prop的使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
個人覺得Prop的使用需要注意四點:
第一點: 使用 DOM 中的模板時,camelCase (駝峰命名法) 的 prop 名需要使用其等價的 kebab-case (短橫線分隔命名) 命名
HTML
Vue.component('blog-post', {// 在 JavaScript 中是 camelCase 的props: ['postTitle'],template: '<h3>{{ postTitle }}</h3>' })JS
<!-- 在 HTML 中是 kebab-case 的 --> <blog-post post-title="hello!"></blog-post>第二點:傳遞靜態或動態 Prop
靜態: 即表示 字符串,整數等不會改變的值(不需要綁定)
<blog-post title="My journey with Vue"></blog-post>動態: 即表示 數組,對象等會改變的值(需要綁定)
<!-- 動態賦予一個變量的值 --><blog-post v-bind:title="post.title"></blog-post><!-- 動態賦予一個復雜表達式的值 --><blog-post v-bind:title="post.title + ' by ' + post.author.name"></blog-post>第三點:單項數據流
所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定:父級 prop 的更新會向下流動到子組件中,但是反過來則不行。這樣會防止從子組件意外改變父級組件的狀態,從而導致你的應用的數據流向難以理解。
即表示:
第四點:Prop 可以進行數據驗證
我們可以為組件的 prop 指定驗證要求,例如你知道的這些類型。如果有一個需求沒有被滿足,則 Vue 會在瀏覽器控制臺中警告你。
props: {// 必填的字符串propC: {type: String,required: true},// 帶有默認值的數字propD: {type: Number,default: 100},// 多個可能的類型BB: [String, Number],// 沒有默認值的對象propE: {type: Object,// 對象或數組默認值必須從一個工廠函數獲取default: ()=>({})},// 帶有默認值的對象propE: {type: Object,// 對象或數組默認值必須從一個工廠函數獲取default: function () {return { message: 'hello' }}},// 自定義驗證函數propF: {validator: function (value) {// 這個值必須匹配下列字符串中的一個return ['success', 'warning', 'danger'].indexOf(value) !== -1}}總結
以上是生活随笔為你收集整理的vue2.0 prop的使用的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 金融基础知识 金融入门知识有哪些
- 下一篇: vue动态生成表单元素