vue.js 組件傳值：屬性傳值可以從父組件到子組件，也可以從子組件到父組件。

父組件到子組件的傳值

　　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的值。

　　這樣就簡單的實現了通過事件的方法從子組件向父組件傳值。

文章來自：https://www.cnblogs.com/jin-zhe/p/8317532.html

vue.js 組件傳值