vue+props傳遞資料怎麼實現

這次帶給大家vue props傳遞資料怎麼實現，vue props傳遞資料的注意事項有哪些，以下就是實戰案例，一起來看一下。

在 Vue 中，父子元件的關係可以總結為 props向下傳遞，事件向上傳遞。父元件透過 props 給子元件下發送數據，子元件透過事件傳送訊息給父元件。看看它們是怎麼工作的。

 一、基本用法

元件不只是要把範本的內容重複使用，更重要的是組件間要進行通訊。

在元件中，使用選項props 來宣告需要從父級接收的數據， props 的值可以是兩種， 一種是字串數組，一種是物件。

1.1　字串陣列：

  <p id="app4">
   <my-component4 message="数据来自父组件"></my-component4>
  </p>
Vue.component('my-component4',{
 props: ['message'],
 template: '<p>{{message}}</p>'
});
var app4 = new Vue({
 el: '#app4'
});

渲染後的結果為：

<p id= ” app4”>
　　<p ＞来自父组件的数据＜／ p>
</p>

props 中宣告的資料與元件data 函數return 的資料主要差別就是props 的來自父級，而data 中的是元件自己的數據，作用域是元件本身，這兩種數據都可以在模板template 及計算屬性computed和方法methods 中使用。

上例的資料message 就是透過props 從父級傳遞過來的，在元件的自訂標籤上直接寫該props 的名稱，如果要傳遞多個數據，在props 陣列中新增項目即可。

有時候，傳遞的數據並不是直接寫死的，而是來自父級的動態數據，這時可以使用指令v -bind來動態綁定props 的值，當父組件的數據變化時，也會傳遞給子組件。

  <p id="app5">
   <input type="text" v-model="text">
   <my-component5 :my-text="text"></my-component5>
  </p>
Vue.component('my-component5',{
 props: ['myText'],
 template: '<p>{{myText}}</p>'
});
var app5 = new Vue({
 el: '#app5',
 data: {
  text: '动态传递父组件数据'
 }
});

注意的幾個點：

1.如果你要直接傳遞數字、布林值、陣列、對象，而且不使用v-bind ，傳遞的只是字串。

2.如果你想把一個物件的所有屬性當作prop 傳遞，可以使用不帶任何參數的v-bind (即用v-bind 而不是v -bind:prop-name)。例如，已知一個 todo 物件：

1.2　物件：

當prop 需要驗證時，就需要物件寫法。

一般當你的元件需要提供給別人使用時，推薦都會進行資料驗證，例如某個資料必須是數字類型，如果傳入字串，就會在控制台彈出警告。

 <p id="app6">
   <input type="text" v-model="number">
   <my-component6 :my-text="number"></my-component6>
  </p>
Vue.component('my-component6',{
 props: {
  'myText':{
   type: Number, //必须是数字类型的
   required: true, //必须传值
   default: 1 //如果未定义，默认值就是1
  }
 },
 template: '<p>{{myText}}</p>'
});
var app6 = new Vue({
 el: '#app6',
 data: {
  number: 1
 }
});

驗證的type 類型可以是：

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

type 也可以是一個自訂建構器，使用instanceof 來偵測。

當prop 驗證失敗時，在開發版本下會在控制台拋出警告。

二、單向資料流

Vue 2.x 與Vue l.x 比較大的一個改變​​就是， Vue2.x 透過props 傳遞資料是單向的了， 也就是父元件資料變化時會傳遞給子元件，但反過來不行。

業務中會經常遇到兩種需要改變prop 的情況，

2.1　一種是父元件傳遞初始值進來，子元件將它作為初始值保存起來，在自己的作用域下可以隨意使用和修改。 （Prop 作為初始值傳入後，子組件想把它當作局部數據來用；）

這種情況可以在組件data 內再聲明一個數據，引用父組件的prop ，示例代碼如下： 

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

元件中宣告了資料count ， 它在元件初始化時會取得來自父元件的initCount ， 之後就與之無關了，只用維護c ount ， 這樣就可以避免直接操作initCount 。

2.2　prop 作為需要被轉換的原始值傳入。 （Prop 作為原始資料傳入，由子元件處理成其它資料輸出。）

這種情況用計算屬性就可以了，範例程式碼如下：

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

注意在JavaScript 中物件和數組是引用類型，指向同一個記憶體空間，如果prop 是物件或數組，在子元件內部改變它會影響父元件的狀態。

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of tree menu with check and cascade selection

Usage scope of comments in regular expressions What

以上是vue+props傳遞資料怎麼實現的詳細內容。更多資訊請關注PHP中文網其他相關文章！