vue的元件傳值
阿新 • • 發佈：2018-12-19
vue的元件傳值
vue的強大之處在於他的元件化，component，在頁面由多個元件組成的情況下，元件間傳值會變得稍微複雜點，這篇文章會根據vue元件間如何傳值來做一些解說。
一般來說頁面中的元件間關係有：父子元件和兄弟元件，傳值方式分為（1）父傳子（2）子傳父（3）兄弟互傳
1、父元件傳值給子元件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="js/vue.js"></script> <title></title> </head> <body> <div id="example"> {{msg}} <father-component></father-component> </div> <script> Vue.component('father-component', { data: function () { return { myValue: '' } }, template: `<div> <input type="text" v-model="myValue" v-bind:data-msg="myValue"/> <hr/> <son-component v-bind:msg="myValue"> </son-component> </div> ` }); Vue.component('son-component', { props: ['msg'], template: `<p>{{"接收到的引數為----"+msg}}</p>` }); new Vue({ el: '#example', data: { msg: 'hello world' } }) </script> </body> </html>
上面程式碼中我寫了個巢狀元件，一個為父，一個為子，名字分別為father-component和son-component，我們要記住，在父傳子的過程中我們在子元件標籤上使用屬性傳值，到了子元件例項中用props屬性來接受值，上面程式碼我在
<son-component v-bind:msg="myValue"></son-component>
給子元件傳了個msg的資料，資料值myValue在父元件中會變化子元件通過props以陣列形式接受到後可以直接在template中使用msg
2、子元件向上傳值給父元件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="js/vue.js"></script> <title></title> </head> <body> <div id="el"> <!-- 呼叫父元件--> <father-component></father-component> </div> <script> //建立一個父元件 Vue.component('father-component', { methods: { //這個引數就是子元件傳來的值 recvMsg: function (sonmsg) { console.log( '接受到子元件傳來的值---' + sonmsg); this.msg = sonmsg } }, data() { return { msg: '等待傳值' } }, template: `<div> <h1>this is father component：{{msg}}</h1> <hr/> <son-component v-on:toFather="recvMsg"> </son-component> </div>` }); //建立一個子元件 Vue.component('son-component', { methods: { handleClick: function () { //觸發事件,並傳值,toFather是父元件的一個事件，第二個引數是傳過去的值 this.$emit('toFather', '今天很開心，學會了元件傳值'); } }, template: `<div> <h1>this is son component</h1> <button @click="handleClick"> 向父元件通過事件傳值 </button> </div> ` }); new Vue({ el: '#el', data: { msg: 'hello world' } }) </script> </body> </html>
在子元件向父元件傳值過程中，稍微複雜一點，子元件需要觸發一個事件，並將值傳過去，父元件要繫結一個事件來接受子元件的值。如上述程式碼，子元件在handleClick中通過$emit確定父元件的觸發事件toFather和傳過去的值，子元件上面寫上要繫結的父元件的觸發事件名字recvMsg，父元件中自定義了一個事件recvMsg，在methods中獲取了傳過來的值。記住$emit關鍵方法。
3、兄弟元件間的傳值
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <script src="js/vue.js"></script> <title></title> </head> <body> <div id="example"> <xiong-da></xiong-da> <hr/> <xiong-er></xiong-er> </div> <script> //兄弟通訊採用的技術方案，就是事件的繫結和觸發 // 觸發:this.$emit() // 繫結:this.$on(); //建立一個vue的例項，藉助該例項完成事件的繫結和觸發 var bus = new Vue(); //熊大告訴熊二：光頭強來了 //熊二給熊大回復訊息：知道了 Vue.component('xiong-da', { created: function () { //繫結事件 bus.$on('toXiongDa', function (msg) { console.log('熊大接收到的訊息為:' + msg); }) }, methods: { tellXiongEr: function () { //觸發自定義事件並傳值 bus.$emit('toXiongEr', '光頭強來了'); } }, template: ` <div> <h1>這是熊大</h1> <button @click="tellXiongEr"> 通知熊二 </button> </div> ` }); Vue.component('xiong-er', { created: function () { //完成事件的繫結 bus.$on('toXiongEr', function (msg) { console.log('熊二接收到訊息了:' + msg); }) }, methods: { replyToXiongDa: function () { //觸發自定義事件 bus.$emit('toXiongDa', '熊二知道了'); } }, template: ` <div> <h1>這是熊二</h1> <button @click="replyToXiongDa"> 回覆熊大 </button> </div> ` }); new Vue({ el: '#example', data: { msg: 'hello world' } }) </script> </body> </html>
兄弟間傳值需要用到bus事件車，確定觸發事件並傳值使用$emit,繫結事件得值使用$on，藉助新的vue例項完成資料傳遞。
如果幫到你請點個贊。