首頁 > 文章 > web前端 > 如何操作vue組件使用props傳遞數據

如何操作vue組件使用props傳遞數據

php中世界最好的语言原創: 2018-05-25 15:30:551467瀏覽

這次帶給大家如何操作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 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

如何操作vue組件使用props傳遞數據

相關文章