vue props 用法（轉載）

時間  2019-12-07
標籤 vue props 用法 轉載 简体版
原文   原文鏈接

前面的話

　　組件接受的選項大部分與Vue實例同樣，而選項props是組件中很是重要的一個選項。在 Vue 中，父子組件的關係能夠總結爲 props down, events up。父組件經過 props 向下傳遞數據給子組件，子組件經過 events 給父組件發送消息。本文將詳細介紹Vue組件選項propsvue

 

父子級組件

　　在介紹props以前，先介紹父子級組件的寫法數組

　　在一個良好定義的接口中儘量將父子組件解耦是很重要的。這保證了每一個組件能夠在相對隔離的環境中書寫和理解，也大幅提升了組件的可維護性和可重用性瀏覽器

【錯誤寫法】函數

　　如今來介紹兩種父子級組件的錯誤寫法ui

　　下面這種形式的寫法是錯誤的，由於當子組件註冊到父組件時，Vue.js會編譯好父組件的模板，模板的內容已經決定了父組件將要渲染的HTML
　　<parent>...</parent>運行時，它的一些子標籤只會被看成普通的HTML來執行，<child></child>不是標準的HTML標籤，會被瀏覽器直接忽視掉this

複製代碼 
<div id="example">
  <parent>
    <child></child>
    <child></child>
  </parent>
</div>
複製代碼

 　　在父組件標籤以外使用子組件也是錯誤的spa

<div id="example">
  <parent></parent>
  <child></child>
</div>

【正確寫法】code

<div id="example">
  <parent></parent>
</div>
複製代碼 
<script>
var childNode = {
  template: '<div>childNode</div>',
}
var parentNode = {
  template: `
  <div class="parent">
    <child></child>
    <child></child>
  </div>
  `,
  components: {
    'child': childNode
  } 
};
// 建立根實例
new Vue({
  el: '#example',
    components: {
    'parent': parentNode
  }  
})
</script>
複製代碼

 

靜態props

　　組件實例的做用域是孤立的。這意味着不能 (也不該該) 在子組件的模板內直接引用父組件的數據。要讓子組件使用父組件的數據，須要經過子組件的 props 選項component

　　使用Prop傳遞數據包括靜態和動態兩種形式，下面先介紹靜態propsorm

　　子組件要顯式地用 props 選項聲明它期待得到的數據

var childNode = {
  template: '<div>{{message}}</div>',
  props:['message']
}

　　靜態Prop經過爲子組件在父組件中的佔位符添加特性的方式來達到傳值的目的

<div id="example">
  <parent></parent>
</div>
複製代碼 
<script>
var childNode = {
  template: '<div>{{message}}</div>',
  props:['message']
}
var parentNode = {
  template: `
  <div class="parent">
    <child message="aaa"></child>
    <child message="bbb"></child>
  </div>`,
  components: {
    'child': childNode
  }
};
// 建立根實例
new Vue({
  el: '#example',
  components: {
    'parent': parentNode
  }
})
</script>
複製代碼

 

命名約定

　　對於props聲明的屬性來講，在父級HTML模板中，屬性名須要使用中劃線寫法

複製代碼 
var parentNode = {
  template: `
  <div class="parent">
    <child my-message="aaa"></child>
    <child my-message="bbb"></child>
  </div>`,
  components: {
    'child': childNode
  }
};
複製代碼

　　子級props屬性聲明時，使用小駝峯或者中劃線寫法均可以；而子級模板使用從父級傳來的變量時，須要使用對應的小駝峯寫法

var childNode = {
  template: '<div>{{myMessage}}</div>',
  props:['myMessage']
}
var childNode = {
  template: '<div>{{myMessage}}</div>',
  props:['my-message']
}

 

動態props

　　在模板中，要動態地綁定父組件的數據到子模板的 props，與綁定到任何普通的HTML特性相相似，就是用 v-bind。每當父組件的數據變化時，該變化也會傳導給子組件

var childNode = {
  template: '<div>{{myMessage}}</div>',
  props:['myMessage']
}
複製代碼 
var parentNode = {
  template: `
  <div class="parent">
    <child :my-message="data1"></child>
    <child :my-message="data2"></child>
  </div>`,
  components: {
    'child': childNode
  },
  data(){
    return {
      'data1':'aaa',
      'data2':'bbb'
    }
  }
};
複製代碼

　　

傳遞數字

　　初學者常犯的一個錯誤是使用字面量語法傳遞數值

<!-- 傳遞了一個字符串 "1" -->
<comp some-prop="1"></comp>
<div id="example">
  <my-parent></my-parent>
</div>
複製代碼 
<script>
var childNode = {
  template: '<div>{{myMessage}}的類型是{{type}}</div>',
  props:['myMessage'],
  computed:{
    type(){
      return typeof this.myMessage
    }
  }
}
var parentNode = {
  template: `
  <div class="parent">
    <my-child my-message="1"></my-child>
  </div>`,
  components: {
    'myChild': childNode
  }
};
// 建立根實例
new Vue({
  el: '#example',
  components: {
    'MyParent': parentNode
  }
})
</script>
複製代碼

　　由於它是一個字面 prop，它的值是字符串 "1" 而不是 number。若是想傳遞一個實際的 number，須要使用 v-bind，從而讓它的值被看成JS表達式計算 

<!-- 傳遞實際的 number -->
<comp v-bind:some-prop="1"></comp>
複製代碼 
var parentNode = {
  template: `
  <div class="parent">
    <my-child :my-message="1"></my-child>
  </div>`,
  components: {
    'myChild': childNode
  }
};
複製代碼

　　或者可使用動態props，在data屬性中設置對應的數字1

複製代碼 
var parentNode = {
  template: `
  <div class="parent">
    <my-child :my-message="data"></my-child>
  </div>`,
  components: {
    'myChild': childNode
  },
  data(){
    return {
      'data': 1
    }
  }
};
複製代碼

 

props驗證

　　能夠爲組件的 props 指定驗證規格。若是傳入的數據不符合規格，Vue會發出警告。當組件給其餘人使用時，這頗有用

　　要指定驗證規格，須要用對象的形式，而不能用字符串數組

複製代碼 
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
      }
    }
  }
})
複製代碼

　　type 能夠是下面原生構造器

複製代碼 
String
Number
Boolean
Function
Object
Array
Symbol
複製代碼

　　type 也能夠是一個自定義構造器函數，使用 instanceof 檢測。

　　當 prop 驗證失敗，Vue 會在拋出警告 (若是使用的是開發版本)。props會在組件實例建立以前進行校驗，因此在 default 或 validator 函數裏，諸如 data、computed 或 methods 等實例屬性還沒法使用

　　下面是一個簡單例子，若是傳入子組件的message不是數字，則拋出警告

<div id="example">
  <parent></parent>
</div>
複製代碼 
<script>
var childNode = {
  template: '<div>{{message}}</div>',
  props:{
    'message':Number
  }
}
var parentNode = {
  template: `
  <div class="parent">
    <child :message="msg"></child>
  </div>`,
  components: {
    'child': childNode
  },
  data(){
    return{
      msg: '123'
    }
  }
};
// 建立根實例
new Vue({
  el: '#example',
  components: {
    'parent': parentNode
  }
})
</script>
複製代碼

　　傳入數字123時，則無警告提示。傳入字符串'123'時，結果以下所示

　　將上面代碼中，子組件的內容修改以下，可自定義驗證函數，當函數返回爲false時，則輸出警告提示

複製代碼 
var childNode = {
  template: '<div>{{message}}</div>',
  props:{
    'message':{
      validator: function (value) {
        return value > 10
      }
    }
  }
}
複製代碼

　　在父組件中傳入msg值爲1，因爲小於10，則輸出警告提示

複製代碼 
var parentNode = {
  template: `
  <div class="parent">
    <child :message="msg"></child>
  </div>`,
  components: {
    'child': childNode
  },
  data(){
    return{
      msg:1
    }
  }
};
複製代碼

 

單向數據流

　　prop 是單向綁定的：當父組件的屬性變化時，將傳導給子組件，可是不會反過來。這是爲了防止子組件無心修改了父組件的狀態——這會讓應用的數據流難以理解

　　另外，每次父組件更新時，子組件的全部 prop 都會更新爲最新值。這意味着不該該在子組件內部改變 prop。若是這麼作了，Vue 會在控制檯給出警告

　　下面是一個典型例子

<div id="example">
  <parent></parent>
</div>
複製代碼 
<script>
var childNode = {
  template: `
  <div class="child">
    <div>
      <span>子組件數據</span>
      <input v-model="childMsg">
    </div>
    <p>{{childMsg}}</p>
  </div>
  `,
  props:['childMsg']
}
var parentNode = {
  template: `
  <div class="parent">
    <div>
      <span>父組件數據</span>
      <input v-model="msg">
    </div>
    <p>{{msg}}</p>
    <child :child-msg="msg"></child>
  </div>
  `,
  components: {
    'child': childNode
  },
  data(){
    return {
      'msg':'match'
    }
  }
};
// 建立根實例
new Vue({
  el: '#example',
  components: {
    'parent': parentNode
  }
})
</script>
複製代碼

　　父組件數據變化時，子組件數據會相應變化；而子組件數據變化時，父組件數據不變，並在控制檯顯示警告

　　修改子組件數據時，打開瀏覽器控制檯會出現下圖所示警告提示

 

修改prop數據

　　修改prop中的數據，一般有如下兩種緣由

　　一、prop 做爲初始值傳入後，子組件想把它看成局部數據來用

　　二、prop 做爲初始值傳入，由子組件處理成其它數據輸出

　　[注意]JS中對象和數組是引用類型，指向同一個內存空間，若是 prop 是一個對象或數組，在子組件內部改變它會影響父組件的狀態

　　對於這兩種狀況，正確的應對方式是

　　一、定義一個局部變量，並用 prop 的值初始化它

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

　　可是，定義的局部變量counter只能接受initialCounter的初始值，當父組件要傳遞的值發生變化時，counter沒法接收到最新值

複製代碼 
<div id="example">
  <parent></parent>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var childNode = {
  template: `
  <div class="child">
    <div>
      <span>子組件數據</span>
      <input v-model="temp">
    </div>
    <p>{{temp}}</p>
  </div>
  `,
  props:['childMsg'],
  data(){
    return{
      temp:this.childMsg
    }
  },
};
var parentNode = {
  template: `
  <div class="parent">
    <div>
      <span>父組件數據</span>
      <input v-model="msg">
    </div>
    <p>{{msg}}</p>
    <child :child-msg="msg"></child>
  </div>
  `,
  components: {
    'child': childNode
  },
  data(){
    return {
      'msg':'match'
    }
  }
};
// 建立根實例
new Vue({
  el: '#example',
  components: {
    'parent': parentNode
  }
})
</script>
複製代碼

　　下面示例中，除初始值外，父組件的值沒法更新到子組件中

　　二、定義一個計算屬性，處理 prop 的值並返回

複製代碼 
props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}
複製代碼

　　可是，因爲是計算屬性，則只能顯示值，而不能設置值

複製代碼 
<script src="https://unpkg.com/vue"></script>
<script>
var childNode = {
  template: `
  <div class="child">
    <div>
      <span>子組件數據</span>
      <input v-model="temp">
    </div>
    <p>{{temp}}</p>
  </div>
  `,
  props:['childMsg'],
  computed:{
      temp(){
        return this.childMsg
      }
  },
};
var parentNode = {
  template: `
  <div class="parent">
    <div>
      <span>父組件數據</span>
      <input v-model="msg">
    </div>
    <p>{{msg}}</p>
    <child :child-msg="msg"></child>
  </div>
  `,
  components: {
    'child': childNode
  },
  data(){
    return {
      'msg':'match'
    }
  }
};
// 建立根實例
new Vue({
  el: '#example',
  components: {
    'parent': parentNode
  }
})
</script>
複製代碼

　　下面示例中，因爲子組件使用的是計算屬性，因此，子組件的數據沒法手動修改

　　三、更加妥帖的方案是，使用變量儲存prop的初始值，並使用watch來觀察prop的值的變化。發生變化時，更新變量的值

複製代碼 
<div id="example">
  <parent></parent>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
var childNode = {
  template: `
  <div class="child">
    <div>
      <span>子組件數據</span>
      <input v-model="temp">
    </div>
    <p>{{temp}}</p>
  </div>
  `,
  props:['childMsg'],
  data(){
    return{
      temp:this.childMsg
    }
  },
  watch:{
    childMsg(){
      this.temp = this.childMsg
    }
  }
};
var parentNode = {
  template: `
  <div class="parent">
    <div>
      <span>父組件數據</span>
      <input v-model="msg">
    </div>
    <p>{{msg}}</p>
    <child :child-msg="msg"></child>
  </div>
  `,
  components: {
    'child': childNode
  },
  data(){
    return {
      'msg':'match'
    }
  }
};
// 建立根實例
new Vue({
  el: '#example',
  components: {
    'parent': parentNode
  }
})
</script>
複製代碼
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程