本文主要給大家透過程式碼實例分析了vue.js資料傳遞以及資料分發slot的相關知識,有這方面興趣的朋友參考下吧,希望能幫助到大家。
一、元件間的資料傳遞
1.父元件取得子元件的資料
*子元件把自己的數據,傳送到父級
*vm.$emit(事件名稱,資料);
*v-on: @
範例用法:當點擊send按鈕的時候,「111」變成「我是子元件的資料」
76c82f278ac045591c9159d381de2c57 9fd01892b579bba0c343404bcccd70fb 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7父级获取子级的数据6e916e0f7d1e588d4f442bf645aedb2f 6ebdbce067bc95e1851e3b8093fd634e2cacc6d41bbb37262a98f745aa00fbf0 c9ccee2e6ea535a969eb3f532ad9fe89 531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d e388a4556c0f65e1904146cc1a846bee 21faa6d2b39cd643d626023a8aaca7f5 5839c0ca9224f814274f66bf7ba46f9c 94b3e26ee717c64999d7867364b1b4a3 d477f9ce7bf77f53fbcf36bec1b69b7a 45a2772a6b6107b401db3c9b82c049c2我是父级 -> {{msg}}54bdf357c58b8a65c66d7c19c8e4d114 //自动调用get方法,@child-msg和下面的this.$emit('child-msg',this.a)相对应 369642beebf5fc7b730ea03cb679d725eaf2859ee44b5934442adb5b52b718da 21c97d3a051048b8e55e3c8f199a54b2 d477f9ce7bf77f53fbcf36bec1b69b7a 684271ed9684bde649abda8831d4d355子组件-39528cedfa926ea0c01e69ef5b2ea9b0 cd71a9f1a461f9e485615a1e4f95e5d8 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ data:function(){ return { msg:111, msg2:'我是父组件的数据' } }, template:'#aaa', methods:{ //这里的msg实际上就是子组件传递给父组件的数据 get:function(msg){ this.msg=msg; } }, components:{ 'bbb':{ data:function(){ return { a:'我是子组件的数据' } }, template:'#bbb', methods:{ send:function(){ this.$emit('child-msg',this.a); } } } } } } }); 2cacc6d41bbb37262a98f745aa00fbf0 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
2、子元件取得父元件的資料
在呼叫子元件:
13bc30f07ad2e0b309d04e5fb0c0c136eaf2859ee44b5934442adb5b52b718da
子組件之內:
props:['m','myMsg'] props:{ 'm':String, 'myMsg':Number }
76c82f278ac045591c9159d381de2c57 9fd01892b579bba0c343404bcccd70fb 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7自己获取父级的数据6e916e0f7d1e588d4f442bf645aedb2f 6ebdbce067bc95e1851e3b8093fd634e2cacc6d41bbb37262a98f745aa00fbf0 c9ccee2e6ea535a969eb3f532ad9fe89 531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d e388a4556c0f65e1904146cc1a846bee e388a4556c0f65e1904146cc1a846bee{{a}}94b3e26ee717c64999d7867364b1b4a3 21faa6d2b39cd643d626023a8aaca7f5 {{msg}} 5839c0ca9224f814274f66bf7ba46f9c 94b3e26ee717c64999d7867364b1b4a3 d477f9ce7bf77f53fbcf36bec1b69b7a 4a249f0d628e2318394fd9b75b4636b111111473f0a7621bec819994bb5020d29372a 24ba698398d3c67097270230bd00cab2eaf2859ee44b5934442adb5b52b718da 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a var vm=new Vue({ el:'#box', data:{ a:'a' }, components:{ 'aaa':{ data:function(){ return { msg:111, msg2:'我是父组件的数据' } }, template:'#aa', components:{ 'bbb':{ props:{ 'mmm':String, 'myMsg':Number }, template:'684271ed9684bde649abda8831d4d355我是bbb组件->{{mmm}} 0c6dc11e160d3b678d68754cc175188a {{myMsg}}39528cedfa926ea0c01e69ef5b2ea9b0' } } } } }); 2cacc6d41bbb37262a98f745aa00fbf0 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e
運行結果:
Vue.js提供了一個混合父元件內容與子元件自己模版的方式:slot,用來佔一個位置
1、基本用法###76c82f278ac045591c9159d381de2c57 9fd01892b579bba0c343404bcccd70fb 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7slot保留原来的位置6e916e0f7d1e588d4f442bf645aedb2f 6ebdbce067bc95e1851e3b8093fd634e2cacc6d41bbb37262a98f745aa00fbf0 c9ccee2e6ea535a969eb3f532ad9fe89 531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d e388a4556c0f65e1904146cc1a846bee 21faa6d2b39cd643d626023a8aaca7f5 ff6d136ddc5fdfeffaf53ff6ee95f185 25edfb22a4f469ecb59f1190150159c61111bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c62222bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c63333bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 5839c0ca9224f814274f66bf7ba46f9c f32b48428a809b51f04d3228cdf461fa 21faa6d2b39cd643d626023a8aaca7f5 5839c0ca9224f814274f66bf7ba46f9c 94b3e26ee717c64999d7867364b1b4a3 d477f9ce7bf77f53fbcf36bec1b69b7a 4a249f0d628e2318394fd9b75b4636b1xxxx473f0a7621bec819994bb5020d29372a 58cb293b8600657fad49ec2c8d37b472这是默认的情况7971cf77a46923278913ee247bc958ee e388a4556c0f65e1904146cc1a846beewelcome vue94b3e26ee717c64999d7867364b1b4a3 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ template:'#aaa' } } }); 2cacc6d41bbb37262a98f745aa00fbf0 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e###運行結果:ul標籤裡面的內容沒有被覆蓋,如果不使用slot,ul標籤裡的內容將會被覆蓋############## 2、slot的name屬性###
76c82f278ac045591c9159d381de2c57 9fd01892b579bba0c343404bcccd70fb 93f0f5c25f18dab9d176bd4f6de5d30e a80eb7cbb6fff8b0ff70bae37074b813 b2386ffb911b14667cb8f0f91ea547a7slot中name属性的使用6e916e0f7d1e588d4f442bf645aedb2f 6ebdbce067bc95e1851e3b8093fd634e2cacc6d41bbb37262a98f745aa00fbf0 c9ccee2e6ea535a969eb3f532ad9fe89 531ac245ce3e4fe3d50054a55f265927 9c3bca370b5104690d9ef395f2c5f8d1 6c04bd5ca3fcae76e30b72ad730ca86d e388a4556c0f65e1904146cc1a846bee 21faa6d2b39cd643d626023a8aaca7f5 ccd4047109ea07979870c366d0ef0770 //这里slot的名字要与下面slot中name属性相对应 25edfb22a4f469ecb59f1190150159c61111bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c62222bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c63333bed06894275b65c1ab86501b08a632eb 929d1f5ca49e04fdcb27f9465b944689 0893ef879e1c9084569d28fbef0254fb //用法同上 25edfb22a4f469ecb59f1190150159c6111bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6222bed06894275b65c1ab86501b08a632eb 25edfb22a4f469ecb59f1190150159c6333bed06894275b65c1ab86501b08a632eb f6f112ef45f603be226bc581f9dd5e90 5839c0ca9224f814274f66bf7ba46f9c f32b48428a809b51f04d3228cdf461fa 21faa6d2b39cd643d626023a8aaca7f5 5839c0ca9224f814274f66bf7ba46f9c 94b3e26ee717c64999d7867364b1b4a3 d477f9ce7bf77f53fbcf36bec1b69b7a 4a249f0d628e2318394fd9b75b4636b1xxxx473f0a7621bec819994bb5020d29372a ef79bf350fa1af528e8524e7cce352ab这是默认的情况7971cf77a46923278913ee247bc958ee //设置name属性,给slot命名 e388a4556c0f65e1904146cc1a846beewelcome vue94b3e26ee717c64999d7867364b1b4a3 3ead1386f1025b804255952fab9f3bdf这是默认的情况27971cf77a46923278913ee247bc958ee 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ template:'#aaa' } } }); 2cacc6d41bbb37262a98f745aa00fbf0 36cc49f0c466276486e50c850b7e4956 73a6ac4ed44ffec12cee46588e518a5e### 運行結果:################相關推薦:########Vue內容分發slot#### #########js元件SlotMachine實作圖片切換效果製作抽獎系統_javascript技巧############如何在vue.js元件之間進行資料傳遞###### #
以上是vue.js資料傳遞以及資料分發slot實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!