vue.js 組件傳值
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 組件傳值