怎么在Vue中使用props方法

本篇文章為大家展示了怎么在Vue中使用props方法，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

Vue props用法詳解

組件接受的選項(xiàng)之一 props 是 Vue 中非常重要的一個(gè)選項(xiàng)。父子組件的關(guān)系可以總結(jié)為：

props down, events up

父組件通過(guò) props 向下傳遞數(shù)據(jù)給子組件；子組件通過(guò) events 給父組件發(fā)送消息。

父子級(jí)組件

比如我們需要?jiǎng)?chuàng)建兩個(gè)組件 parent 和 child。需要保證每個(gè)組件可以在相對(duì)隔離的環(huán)境中書(shū)寫(xiě)，這樣也能提高組件的可維護(hù)性。

這里我們先定義父子兩個(gè)組件和一個(gè) Vue 對(duì)象：

var childNode = {
 template: `
  <div>childNode</div>
  `
};
var parentNode = {
 template: `
  <div>
   <child></child>
   <child></child>
  </div>
  `,
 components: {
 child: childNode
 }
};
new Vue({
 el: "#example",
 components: {
 parent: parentNode
 }
});

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

這里的 childNode 定義的 template 是一個(gè) div，并且內(nèi)容是"childNode"字符串。

而在 parentNode 的 template 中定義了 div 的 class 名叫 parent 并且包含了兩個(gè) child 組件。

如果大家想對(duì)VUE.JS有更加深入系統(tǒng)的學(xué)習(xí)，可以參閱 Vue.js實(shí)戰(zhàn) PDF高質(zhì)量掃描版 這本經(jīng)典讀物

靜態(tài) props

組件實(shí)例的作用域是孤立的。這意味著不能（也不應(yīng)該）在子組件的模板中直接飲用父組件的數(shù)據(jù)。要讓子組件使用父組件的數(shù)據(jù)，需要通過(guò)子組件的 props 選項(xiàng)。

父組件向子組件傳遞數(shù)據(jù)分為兩種方式：動(dòng)態(tài)和靜態(tài)，這里先介紹靜態(tài)方式。

子組件要顯示的用 props 聲明它期望獲得的數(shù)據(jù)

修改上例中的代碼，給 childNode 添加一個(gè) props 選項(xiàng)和需要的forChildMsg數(shù)據(jù);

然后在父組件中的占位符添加特性的方式來(lái)傳遞數(shù)據(jù)。

var childNode = {
 template: `
  <div>
   {{forChildMsg}}
  </div>
  `,
 props: ["for-child-msg"]
};
var parentNode = {
 template: `
  <div>
   <p>parentNode</p>
   <child for-child-msg="aaa"></child>
   <child for-child-msg="bbb"></child>
  </div>
  `,
 components: {
 child: childNode
 }
};

命名規(guī)范

對(duì)于 props 聲明的屬性，在父組件的 template 模板中，屬性名需要使用中劃線寫(xiě)法；

子組件 props 屬性聲明時(shí)，使用小駝峰或者中劃線寫(xiě)法都可以；而子組件的模板使用從父組件傳來(lái)的變量時(shí)，需要使用對(duì)應(yīng)的小駝峰寫(xiě)法。別擔(dān)心，Vue 能夠正確識(shí)別出小駝峰和下劃線命名法混用的變量，如這里的forChildMsg和for-child-msg是同一值。

動(dòng)態(tài) props

在模板中，要?jiǎng)討B(tài)地綁定父組件的數(shù)據(jù)到子組件模板的 props，和綁定 Html 標(biāo)簽特性一樣，使用v-bind綁定；

基于上述靜態(tài) props 的代碼，這次只需要改動(dòng)父組件：

var parentNode = {
 template: `
  <div>
   <p>parentNode</p>
   <child :for-child-msg="childMsg1"></child>
   <child :for-child-msg="childMsg2"></child>
  </div>
  `,
 components: {
 child: childNode
 },
 data: function() {
 return {
  childMsg1: "Dynamic props msg for child-1",
  childMsg2: "Dynamic props msg for child-2"
 };
 }
};

在父組件的 data 的 return 數(shù)據(jù)中的 childMsg1 和 childMsg2 會(huì)被傳入子組件中，

props 驗(yàn)證

驗(yàn)證傳入的 props 參數(shù)的數(shù)據(jù)規(guī)格，如果不符合數(shù)據(jù)規(guī)格，Vue 會(huì)發(fā)出警告。

能判斷的所有種類(lèi)（也就是 type 值）有：String, Number, Boolean, Function, Object, Array, Symbol

Vue.component("example", {
 props: {
 // 基礎(chǔ)類(lèi)型檢測(cè), null意味著任何類(lèi)型都行
 propA: Number,
 // 多種類(lèi)型
 propB: [String, Number],
 // 必傳且是String
 propC: {
  type: String,
  required: true
 },
 // 數(shù)字有默認(rèn)值
 propD: {
  type: Number,
  default: 101
 },
 // 數(shù)組、默認(rèn)值是一個(gè)工廠函數(shù)返回對(duì)象
 propE: {
  type: Object,
  default: function() {
  console.log("propE default invoked.");
  return { message: "I am from propE." };
  }
 },
 // 自定義驗(yàn)證函數(shù)
 propF: {
  isValid: function(value) {
  return value > 100;
  }
 }
 }
});
let childNode = {
 template: "<div>{{forChildMsg}}</div>",
 props: {
 "for-child-msg": Number
 }
};
let parentNode = {
 template: `
   <div class="parent">
   <child :for-child-msg="msg"></child>
   </div>
  `,
 components: {
 child: childNode
 },
 data() {
 return {
  // 當(dāng)這里是字符串 "123456"時(shí)會(huì)報(bào)錯(cuò)
  msg: 123456
 };
 }
};

還可以在 props 定義的數(shù)據(jù)中加入自定義驗(yàn)證函數(shù)，當(dāng)函數(shù)返回 false 時(shí)，輸出警告。

比如我們把上述例子中的 childNode 的for-child-msg修改成一個(gè)對(duì)象，并包含一個(gè)名叫validator的函數(shù)，該命名是規(guī)定叫validator的，自定義函數(shù)名不會(huì)生效。

let childNode = {
 template: "<div>{{forChildMsg}}</div>",
 props: {
 "for-child-msg": {
  validator: function(value) {
  return value > 100;
  }
 }
 }
};

在這里我們給for-child-msg變量設(shè)置了validator函數(shù)，并且要求傳入的值必須大于 100，否則報(bào)出警告。

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

props 是單向綁定的：當(dāng)父組件的屬性變化時(shí)，將傳導(dǎo)給子組件，但是不會(huì)反過(guò)來(lái)。這是為了防止子組件五一修改父組件的狀態(tài)。

所以不應(yīng)該在子組件中修改 props 中的值，Vue 會(huì)報(bào)出警告。

let childNode = {
 template: `
   <div class="child">
   <div>
    <span>子組件數(shù)據(jù)</span>
    <input v-model="forChildMsg"/>
   </div>
   <p>{{forChildMsg}}</p>
   </div>`,
 props: {
 "for-child-msg": String
 }
};
let parentNode = {
 template: `
   <div class="parent">
   <div>
    <span>父組件數(shù)據(jù)</span>
    <input v-model="msg"/>
   </div>
   <p>{{msg}}</p>
   <child :for-child-msg="msg"></child>
   </div>
  `,
 components: {
 child: childNode
 },
 data() {
 return {
  msg: "default string."
 };
 }
};

這里我們給父組件和子組件都有一個(gè)輸入框，并且顯示出父組件數(shù)據(jù)和子組件的數(shù)據(jù)。當(dāng)我們?cè)诟附M件的輸入框輸入新數(shù)據(jù)時(shí)，同步的子組件數(shù)據(jù)也被修改了；這就是 props 的向子組件傳遞數(shù)據(jù)。而當(dāng)我們修改子組件的輸入框時(shí)，瀏覽器的控制臺(tái)則報(bào)出錯(cuò)誤警告

[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "forChildMsg"

修改 props 數(shù)據(jù)

通常有兩種原因：

1. prop 作為初始值傳入后，子組件想把它當(dāng)做局部數(shù)據(jù)來(lái)用

2. prop 作為初始值傳入后，由子組件處理成其他數(shù)據(jù)輸出

應(yīng)對(duì)辦法是

定義一個(gè)局部變量，并用 prop 的值初始化它

但是由于定義的 ownChildMsg 只能接受 forChildMsg 的初始值，當(dāng)父組件要傳遞的值變化發(fā)生時(shí)，ownChildMsg 無(wú)法收到更新。

let childNode = {
 template: `
   <div class="child">
   <div>
    <span>子組件數(shù)據(jù)</span>
    <input v-model="forChildMsg"/>
   </div>
   <p>{{forChildMsg}}</p>
   <p>ownChildMsg : {{ownChildMsg}}</p>
   </div>`,
 props: {
 "for-child-msg": String
 },
 data() {
 return { ownChildMsg: this.forChildMsg };
 }
};

這里我們加了一個(gè)<p>用于查看 ownChildMsg 數(shù)據(jù)是否變化，結(jié)果發(fā)現(xiàn)只有默認(rèn)值傳遞給了 ownChildMsg，父組件改變只會(huì)變化到 forChildMsg，不會(huì)修改 ownChildMsg。

定義一個(gè)計(jì)算屬性，處理 prop 的值并返回

由于是計(jì)算屬性，所以只能顯示值，不能設(shè)置值。我們這里設(shè)置的是一旦從父組件修改了 forChildMsg 數(shù)據(jù)，我們就把 forChildMsg 加上一個(gè)字符串"---ownChildMsg"，然后顯示在屏幕上。這時(shí)是可以每當(dāng)父組件修改了新數(shù)據(jù)，都會(huì)更新 ownChildMsg 數(shù)據(jù)的。

let childNode = {
 template: `
   <div class="child">
   <div>
    <span>子組件數(shù)據(jù)</span>
    <input v-model="forChildMsg"/>
   </div>
   <p>{{forChildMsg}}</p>
   <p>ownChildMsg : {{ownChildMsg}}</p>
   </div>`,
 props: {
 "for-child-msg": String
 },
 computed: {
 ownChildMsg() {
  return this.forChildMsg + "---ownChildMsg";
 }
 }
};

更加妥帖的方式是使用變量存儲(chǔ) prop 的初始值，并用 watch 來(lái)觀察 prop 值得變化。發(fā)生變化時(shí)，更新變量的值。

let childNode = {
 template: `
   <div class="child">
   <div>
    <span>子組件數(shù)據(jù)</span>
    <input v-model="forChildMsg"/>
   </div>
   <p>{{forChildMsg}}</p>
   <p>ownChildMsg : {{ownChildMsg}}</p>
   </div>`,
 props: {
 "for-child-msg": String
 },
 data() {
 return {
  ownChildMsg: this.forChildMsg
 };
 },
 watch: {
 forChildMsg() {
  this.ownChildMsg = this.forChildMsg;
 }
 }
};

上述內(nèi)容就是怎么在Vue中使用props方法，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。