標籤：rem ack 相互 lan 參數類型 環境 cat 代碼 def
Vue組件一-父組件傳值給子組件開始Vue組件是學習Vue架構最比較難的部分，而這部分痛點我認為可以分為三個部分學習，即
整個部落格使用的原始碼-請點擊
所以將用三篇部落格分別進行介紹以上三種情況和使用
Vue的設計者對組件的理解Vue的設計者，對組件和父組件之間的關係流上做了闡述，即單向資料流圖：父組件向子組件傳遞資料，子組件回饋事件
屬性下傳，事件上傳父組件掛載的執行個體組件意味著協同工作，通常父子組件會是這樣的關係：組件 A 在它的模板中使用了組件 B。它們之間必然需要相互連信：父組件要給子組件傳遞資料，子組件需要將它內部發生的事情告知給父組件。然而，在一個良好定義的介面中儘可能將父子組件解耦是很重要的。這保證了每個組件可以在相對隔離的環境中書寫和理解，也大幅提高了組件的可維護性和可重用性。
在 Vue 中，父子組件的關係可以總結為 props down, events up。父組件通過 props 向下傳遞資料給子組件，子組件通過 events 給父組件發送訊息。看看它們是怎麼工作的。
上文提到的三篇文章，都使用一個父組件掛載對象，內容比較長(可以選擇不看，直接看props的使用)，感興趣可以到git上去看原始碼
模版：
<body> <div id="el-component-id"></div><bodyVue執行個體：
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 } } } }});組件定義：
// 使用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>組件定義：
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>組件定義：
可以校正傳遞進來的屬性，例如：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的封裝可以是一個數組，也可以是對象。
熟練掌握父組件向子組件傳遞參數的方法，可以對Vue的關鍵區段更快的理解。
【轉】Vue組件一-父組件傳值給子組件
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
