vue組件中使用props傳遞數(shù)據(jù)的實(shí)例詳解

在 Vue 中，父子組件的關(guān)系可以總結(jié)為 props向下傳遞，事件向上傳遞。父組件通過 props 給子組件下發(fā)數(shù)據(jù)，子組件通過事件給父組件發(fā)送消息?？纯此鼈兪窃趺垂ぷ鞯?。

為臺江等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及臺江網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)、臺江網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！

 一、基本用法

組件不僅僅是要把模板的內(nèi)容進(jìn)行復(fù)用，更重要的是組件間要進(jìn)行通信。

在組件中，使用選項(xiàng)props 來聲明需要從父級接收的數(shù)據(jù)， props 的值可以是兩種， 一種是字符串?dāng)?shù)組，一種是對象。

1.1　字符串?dāng)?shù)組：

  <div id="app4">
   <my-component4 message="數(shù)據(jù)來自父組件"></my-component4>
  </div>
Vue.component('my-component4',{
 props: ['message'],
 template: '<div>{{message}}</div>'
});
var app4 = new Vue({
 el: '#app4'
});

渲染后的結(jié)果為：

<div id= ” app4”>
　　<div ＞來自父組件的數(shù)據(jù)＜／ div>
</div>

props 中聲明的數(shù)據(jù)與組件data 函數(shù)return 的數(shù)據(jù)主要區(qū)別就是props 的來自父級，而data 中的是組件自己的數(shù)據(jù)，作用域是組件本身，這兩種數(shù)據(jù)都可以在模板template 及計(jì)算屬性computed和方法methods 中使用。

上例的數(shù)據(jù)message 就是通過props 從父級傳遞過來的，在組件的自定義標(biāo)簽上直接寫該props 的名稱，如果要傳遞多個(gè)數(shù)據(jù)，在props 數(shù)組中添加項(xiàng)即可。

有時(shí)候，傳遞的數(shù)據(jù)并不是直接寫死的，而是來自父級的動(dòng)態(tài)數(shù)據(jù)，這時(shí)可以使用指令v -bind來動(dòng)態(tài)綁定props 的值，當(dāng)父組件的數(shù)據(jù)變化時(shí)，也會(huì)傳遞給子組件。

  <div id="app5">
   <input type="text" v-model="text">
   <my-component5 :my-text="text"></my-component5>
  </div>
Vue.component('my-component5',{
 props: ['myText'],
 template: '<div>{{myText}}</div>'
});
var app5 = new Vue({
 el: '#app5',
 data: {
  text: '動(dòng)態(tài)傳遞父組件數(shù)據(jù)'
 }
});

注意的幾個(gè)點(diǎn)：

1.如果你要直接傳遞數(shù)字、布爾值、數(shù)組、對象，而且不使用v-bind ，傳遞的僅僅是字符串。

2.如果你想把一個(gè)對象的所有屬性作為 prop 進(jìn)行傳遞，可以使用不帶任何參數(shù)的 v-bind (即用 v-bind 而不是 v-bind:prop-name)。例如，已知一個(gè) todo 對象：

1.2　對象：

當(dāng)prop 需要驗(yàn)證時(shí)，就需要對象寫法。

一般當(dāng)你的組件需要提供給別人使用時(shí)，推薦都進(jìn)行數(shù)據(jù)驗(yàn)證，比如某個(gè)數(shù)據(jù)必須是數(shù)字類型，如果傳入字符串，就會(huì)在控制臺彈出警告。

 <div id="app6">
   <input type="text" v-model="number">
   <my-component6 :my-text="number"></my-component6>
  </div>
Vue.component('my-component6',{
 props: {
  'myText':{
   type: Number, //必須是數(shù)字類型的
   required: true, //必須傳值
   default: 1 //如果未定義，默認(rèn)值就是1
  }
 },
 template: '<div>{{myText}}</div>'
});
var app6 = new Vue({
 el: '#app6',
 data: {
  number: 1
 }
});

驗(yàn)證的type 類型可以是：

• String
• Number
• Boolean
• Object
• Array
• Function

type 也可以是一個(gè)自定義構(gòu)造器，使用instanceof 檢測。

當(dāng)prop 驗(yàn)證失敗時(shí)，在開發(fā)版本下會(huì)在控制臺拋出一條警告。

二、單向數(shù)據(jù)流

Vue 2.x 與Vue l.x 比較大的一個(gè)改變就是， Vue2.x 通過props 傳遞數(shù)據(jù)是單向的了， 也就是父組件數(shù)據(jù)變化時(shí)會(huì)傳遞給子組件，但是反過來不行。

業(yè)務(wù)中會(huì)經(jīng)常遇到兩種需要改變prop 的情況，

2.1　一種是父組件傳遞初始值進(jìn)來，子組件將它作為初始值保存起來，在自己的作用域下可以隨意使用和修改。（Prop 作為初始值傳入后，子組件想把它當(dāng)作局部數(shù)據(jù)來用；）

這種情況可以在組件data 內(nèi)再聲明一個(gè)數(shù)據(jù)，引用父組件的prop ，示例代碼如下： 

 <div id="app7">
   <my-component7 :init-count="1"></my-component7>
  </div>
Vue.component('my-component7',{
 props: ['initCount'],
 template: '<div>{{count}}</div>',
 data: function(){
  return {
   count: this.initCount
  }
 }
});
var app7 = new Vue({
 el: '#app7'
});

組件中聲明了數(shù)據(jù)count ， 它在組件初始化時(shí)會(huì)獲取來自父組件的initCount ， 之后就與之無關(guān)了，只用維護(hù)c ount ， 這樣就可以避免直接操作initCount 。

2.2　prop 作為需要被轉(zhuǎn)變的原始值傳入。（Prop 作為原始數(shù)據(jù)傳入，由子組件處理成其它數(shù)據(jù)輸出。）

這種情況用計(jì)算屬性就可以了， 示例代碼如下：

  <div id="app8">
   <my-component8 :width="100"></my-component8>
  </div>
Vue.component('my-component8',{
 props: ['width'],
 template: '<div :>組件內(nèi)容</div>',
 computed: {
  style: function(){
   return {
    width: this.width+'px'
   }
  }
 }
});
var app8 = new Vue({
 el: '#app8'
});

注意在 JavaScript 中對象和數(shù)組是引用類型，指向同一個(gè)內(nèi)存空間，如果 prop 是一個(gè)對象或數(shù)組，在子組件內(nèi)部改變它會(huì)影響父組件的狀態(tài)。

總結(jié)

以上所述是小編給大家介紹的vue組件中使用props傳遞數(shù)據(jù)的實(shí)例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！

新聞名稱：vue組件中使用props傳遞數(shù)據(jù)的實(shí)例詳解
標(biāo)題路徑：http://bm7419.com/article8/gipdop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站建設(shè)、微信小程序、面包屑導(dǎo)航、關(guān)鍵詞優(yōu)化、Google、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)