【轉】Vue組件一-父組件傳值給子組件
阿新 • • 發佈：2018-09-30
字符 container 實例 pro += 掌握 follow ofo https 
屬性下傳，事件上傳
Vue組件一-父組件傳值給子組件
開始
Vue組件是學習Vue框架最比較難的部分，而這部分難點我認為可以分為三個部分學習，即
- 組件的傳值 - 父組件向子組件中傳值
- 事件回饋 - 子組件向父組件發送消息，父組件監聽消息
- 分發內容
整個博客使用的源代碼-請點擊
所以將用三篇博客分別進行介紹以上三種情況和使用
Vue的設計者對組件的理解
Vue的設計者，對組件和父組件之間的關系流上做了闡述，即單向數據流圖：父組件向子組件傳遞數據，子組件回饋事件
組件意味著協同工作，通常父子組件會是這樣的關系：組件 A 在它的模板中使用了組件 B。它們之間必然需要相互通信：父組件要給子組件傳遞數據，子組件需要將它內部發生的事情告知給父組件。然而，在一個良好定義的接口中盡可能將父子組件解耦是很重要的。這保證了每個組件可以在相對隔離的環境中書寫和理解，也大幅提高了組件的可維護性和可重用性。
在 Vue 中，父子組件的關系可以總結為 props down, events up。父組件通過 props 向下傳遞數據給子組件，子組件通過 events 給父組件發送消息。看看它們是怎麽工作的。
屬性下傳，事件上傳
父組件掛載的實例
上文提到的三篇文章，都使用一個父組件掛載對象，內容比較長(可以選擇不看，直接看props的使用)，感興趣可以到git上去看源代碼
模版：
<body>
<div id="el-component-id"></div>
<body
Vue實例：
var vm = new Vue({
el: "#el-component-id",
data: {
welcome: "welcome to Vue",
parentMessage: "this is parent message",
iMessage: "",
person: {
name: "小明",
from: "江蘇",
to: "江西",
purpose: "喝一杯牛奶"
},
persons: 10,
sumOfTotal: 0,
nativeSumOfTotal: 0,
food: "牛肉",
languages: ["英語", "中文", "希臘語", "法語", "俄羅斯語"],
dynamicComponent: "AppHeader"
},
methods: {
incrementWithTotal: function() {
this.sumOfTotal = this.sumOfTotal + 1;
},
nativeDoThing: function() {
this.nativeSumOfTotal += 1;
},
changeCurrentComponent: function() {
let components = ["AppHeader", "AppFooter", "AppMain"];
let idx = components.indexOf(this.dynamicComponent);
if (idx == 2 || idx == -1) {
idx = 0;
} else {
++idx;
}
this.dynamicComponent = components[idx];
}
},
components: {
AppHeader: {
props: ["initialText"],
template: "<div><strong>{{title}}</strong></div>",
data: function() {
return {
title: this.initialText
}
}
},
AppFooter: {
props: ["initialText"],
template: "<div><sub>{{footerTitle}}</sub></div>",
data: function() {
return {
footerTitle: this.initialText
}
}
},
AppMain: {
props: ["initialText"],
template: "<div style=‘color:blue;‘>{{mainContent}}</div>",
data: function() {
return {
mainContent: this.initialText
}
}
}
}
});
1. props傳遞單個參數
組件定義：
// 使用props數組的形式進行傳遞參數
Vue.component("component-span-child-1", {
props: ["message"],
template: "<span>{{message}}</span>"
})
模版中進行傳值：
<div>
<h4>組件一-props傳遞單個參數</h4>
// 字面量傳值
<component-span-child-1 message="component-style-one"></component-span-child-1>
<br />
// 綁定父組件對象實例屬性 v-bind:someProperty簡寫為:someProperty
<component-span-child-1 :message="parentMessage"></component-span-child-1>
<br />
<component-span-child-1 v-bind:message="parentMessage"></component-span-child-1>
<br />
<input v-model="iMessage" placeholder="請輸入值"/>
<component-span-child-1 :message="iMessage"></component-span-child-1>
</div>
2. props傳遞多個參數
組件定義：
Vue.component("component-span-child-2", {
props: ["name", "from", "to", "purpose"],
template: "<div><span>{{name}}從{{from}}到{{to}}，{{purpose}}</span></div>"
})
模版中傳值：
<div>
<h4>組件二-props傳遞多個參數</h4>
// 字面量傳值
<component-span-child-2 name="小李" from="南京" to="北京" purpose="去買個書包"></component-span-child-2>
// 父組件實例對象屬性傳值
<component-span-child-2 :name="person.name" :from="person.from" :to="person.to" :purpose="person.purpose"></component-span-child-2>
</div>
3. 使用props對象高級傳參，並對參數進行校驗
組件定義：
可以校驗傳遞進來的屬性，例如：1. 校驗類型 2. 是否必須傳遞 3. 提供默認值 4. 通過函數校驗，如校驗Number類型是否大於某個值
Vue.component("component-span-child-3", {
props: {
name: {
type: String,
require: true
},
persons: {
type: Number,
default: 1,
validator: function(value) {
return value > 0;
}
},
location: {
type: String,
default: "上海"
},
action: {
type: String,
default: "拉粑粑"
}
},
template: "<div><span>{{name}}和{{persons}}個人，去{{location}}裏面{{action}}</span></div>"
})
模版中使用：
<div>
<h4>組件三-使用props對象傳遞參數，和校驗</h4>
<component-span-child-3 name="小狗" :persons="persons" location="講述郾城" action="去淘金啊"></component-span-child-3>
</div>
總結
父組件向子組件主要是通過props關鍵字，主要使用情況可以分為上面描述的三種。props的封裝可以是一個數組，也可以是對象。
- 當使用數組封裝props的時候，只是簡單將父組件的參數傳遞給子組件使用，此處的參數可以是對象，字符串，number類型的數據
- 當使用對象封裝props的時候，可以更加高級的校驗參數，比如參數類型，默認值，參數大小等一系列校驗。當不符合時候，可以看到Vue再控制臺給出錯誤警告
熟練掌握父組件向子組件傳遞參數的方法，可以對Vue的關鍵部分更快的理解。
【轉】Vue組件一-父組件傳值給子組件