Vue.js之組件傳值
屬性傳值可以從父組件到子組件，也可以從子組件到父組件。
這里講一下從父組件到子組件的傳值
還以上次的demo為例，demo里有APP.vue是父組件，Header.vue，Users.vue和Footer.vue為子組件，Users.vue中的數據有個數組，現在把數組放到父組件App.vue中
App.vue文件：
1 <template> 2 <div id="app"> 3 <app-header></app-header> 4 <users v-bind:users="users"></users> 5 <app-footer></app-footer> 6 </div> 7 </template> 8 <!--行為--> 9 <script> 10 //局部注冊組件 11 import Users from './components/Users' 12 import Header from './components/Header' 13 import Footer from './components/Footer' 14 15 export default { 16 name: 'App', 17 data(){ 18 return { 19 users:[ 20 {name:"Henry",Position:"Java工程師",show:false}, 21 {name:"Lily",Position:"Java工程師",show:false}, 22 {name:"Kang",Position:"Java工程師",show:false}, 23 {name:"Henry",Position:"Java工程師",show:false}, 24 {name:"Henry",Position:"Java工程師",show:false} 25 ] 26 } 27 }, 28 components:{ 29 "users":Users, 30 "app-header":Header, 31 "app-footer":Footer 32 } 33 } 34 </script> 35 36 <!--樣式--> 37 <style > 38 39 h1{ 40 color: pink; 41 } 42 </style>
這里通過與子組件關聯的 <users></users> 標簽傳值，在標簽里通過 V-bind：users=“users” 來實現，前面的users是我們起的別名，后面的“users”為data（）返回值里面的users數組.
然后在子組件里接收數據，接收數據這里有兩種方法。
第一種：
在子組件Users.vue中的script里，直接通過 props：[“users”] 來獲取數組，這樣就可以在子組件里直接使用users數組，但是這種方法不夠嚴謹。
1 <script> 2 export default { 3 name: 'users', 4 props:['users'] 5 } 6 </script>
第二種：
在子組件Users.vue中的script里，通過通過 props：{...} 來獲取
1 <script> 2 export default { 3 name: 'users', 4 props:{ 5 users:{ 6 type:Array, 7 required:true 8 } 9 } 10 } 11 </script>
在props中，可以接收多個對象，而且可以指定對象的類型，而且可以說明是不是規格的數據。
屬性傳值的時候可以傳兩種東西，一個是傳具體的值，另一個是傳引用，這里的引用一般只有兩個東西，一個是數組，一個是對象
注意：注意傳值和傳引用的區別
傳值： string number boolean
傳引用： array object
傳值和傳引用會帶來不同的效果，選擇哪一種要根據項目的具體需求而定。
例如上面的例子，傳的就是一個數組，是傳引用，既然是傳引用，就會出現一些問題，例如在項目中多次引用數據，如果添加或者刪除一個地方的數據，其他地方的數據也會出現變化，
但是傳值的話，修改一個地方其他地方並不會改變
子組件像父組件傳值
1.通過事件傳值
首先在子組件中注冊一個事件，通過 this.$emit("titleChanged","子向父組件傳值"); 第一個參數是當前注冊事件的名字是什么，自己定義的一個事件，第二個參數是該事件要傳的內容。
例如：
Header.vue文件：
1 <template> 2 <header @click="changeTitle"> 3 <h1>{{title}}</h1> 4 </header> 5 </template> 6 7 <script> 8 export default { 9 name: 'app-header', 10 data () { 11 return { 12 title1:"Vue.js Demo" 13 } 14 }, 15 props:{ 16 title:{ 17 type:String 18 } 19 }, 20 methods:{ 21 changeTitle:function(){ 22 this.$emit("titleChanged","子向父組件傳值"); 23 } 24 } 25 } 26 </script> 27 28 <style scoped> 29 header{ 30 background: pink; 31 padding: 10px; 32 } 33 h1{ 34 color: #222; 35 text-align: center; 36 } 37 </style>
當在header上點擊，就出觸發changeTitle方法，然后這個changeTitle方法會在父組件App.vue中尋找titleChanged事件，然后在父組件中實現titleChanged事件。
App.vue文件：
1 <!--模板--> 2 <template> 3 <div id="app"> 4 <app-header @titleChanged="updateTitle($event)" :title="title"></app-header> 5 <users :users="users"></users> 6 <app-footer></app-footer> 7 </div> 8 </template> 9 10 <!--行為--> 11 <script> 12 //局部注冊組件 13 import Users from './components/Users' 14 import Header from './components/Header' 15 import Footer from './components/Footer' 16 17 export default { 18 name: 'App', 19 data(){ 20 return { 21 title:"這是一個title！" 22 } 23 }, 24 methods:{ 25 updateTitle:function (title) { 26 this.title = title; 27 } 28 }, 29 components:{ 30 "users":Users, 31 "app-header":Header, 32 "app-footer":Footer 33 } 34 35 } 36 </script> 37 38 <!--樣式--> 39 <style > 40 41 h1{ 42 color: pink; 43 } 44 </style>
在App.vue組件中與子組件關聯的標簽中綁定一個事件 @titleChanged="updateTitle($event)" ，事件名字就是子組件注冊的事件名字，然后這個事件再實現一個方法 updateTitle($event) ，接收參數用 $event ，接下來在App.vue組件中實現 updateTitle() 方法，這里的 this.title=title 中的this.title是當前頁面的title，后面的title是形參，是子組件傳遞過來的參數。
這樣運行程序后，在header上點擊以后就替換成了從子組件中傳過來的值，OK現在來分析一下工作流程：
當我們點擊header標簽的時候，會觸發Header.vue組件中的changeTitle方法，觸發這個方法以后，方法里注冊了一個事件titleChanged，並且該事件傳遞了一個參數，然后會在父組件App.vue中尋找titleChanged事件，然后App.vue中的這個事件實現了updateTitle方法，然后該方法用子組件傳遞過來的值替換了當前組件的title的值。
這樣就簡單的實現了通過事件的方法從子組件向父組件傳值。