您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)vue組件如何實現(xiàn)數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取,slot,router路由功能的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
一、vue默認(rèn)情況下,子組件也沒法訪問父組件數(shù)據(jù)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> <style> </style> </head> <body> <div id="box"> <aaa> </aaa> </div> <script> var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ data(){ return { msg:'我是父組件的數(shù)據(jù)' } }, template:'<h3>我是aaa組件</h3><bbb></bbb>', components:{ 'bbb':{ template:'<h4>我是bbb組件->{{msg}}</h4>'//這里是子組件,是訪問不到父組件的數(shù)據(jù)msg } } } } }); </script> </body> </html>
二、數(shù)據(jù)傳遞
組件數(shù)據(jù)傳遞: √
1. 子組件獲取父組件data
在調(diào)用子組件:
<bbb :m="數(shù)據(jù)"></bbb>
子組件之內(nèi):
props:['m','myMsg'] props:{ 'm':String, 'myMsg':Number }
2. 父級獲取子級數(shù)據(jù)
*子組件把自己的數(shù)據(jù),發(fā)送到父級
vm.$emit(事件名,數(shù)據(jù));
v-on: @
1、子組件獲取父組件data
方法一:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> <style> </style> </head> <body> <div id="box"> <aaa></aaa> </div> <template id="aaa"> <h2>11111</h2> <bbb :mmm="msg2" :my-msg="msg"></bbb> </template> <script> var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ data(){ return { msg:111, msg2:'我是父組件的數(shù)據(jù)' } }, template:'#aaa', components:{ 'bbb':{ props:['mmm','myMsg'],//my-msg在這里要變成駝峰命名法 template:'<h4>我是bbb組件->{{mmm}} <br> {{myMsg}}</h4>' } } } } }); </script> </body> </html>
方法二:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> <style> </style> </head> <body> <div id="box"> <aaa></aaa> </div> <template id="aaa"> <h2>11111</h2> <bbb :mmm="msg2" :my-msg="msg"></bbb> </template> <script> var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ data(){ return { msg:111, msg2:'我是父組件的數(shù)據(jù)' } }, template:'#aaa', components:{ 'bbb':{ props:{ 'm':String,//注明數(shù)據(jù)類型 'myMsg':Number }, template:'<h4>我是bbb組件->{{mmm}} <br> {{myMsg}}</h4>' } } } } }); </script> </body> </html>
2、 父級獲取子級數(shù)據(jù)
方法一:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> <style> </style> </head> <body> <div id="box"> <aaa></aaa> </div> <template id="aaa"> <span>我是父級 -> {{msg}}</span> <bbb @child-msg="get"></bbb> </template> <template id="bbb"> <h4>子組件-</h4> <input type="button" value="send" @click="send"> </template> <script> var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ data(){ return { msg:'我是父組件的數(shù)據(jù)' } }, template:'#aaa', methods:{ get(msg){ // alert(msg); this.msg=msg; } }, components:{ 'bbb':{ data(){ return { a:'我是子組件的數(shù)據(jù)' } }, template:'#bbb', methods:{ send(){ this.$emit('child-msg',this.a); } } } } } } }); </script> </body> </html>
注意:
vm.dispatch(事件名,數(shù)據(jù))子級向父級發(fā)送數(shù)據(jù)vm.dispatch(事件名,數(shù)據(jù))子級向父級發(fā)送數(shù)據(jù)vm.broadcast(事件名,數(shù)據(jù)) 父級向子級廣播數(shù)據(jù)
配合: event:{}
在vue2.0里面已經(jīng),報廢了
slot:位置、槽口
作用: 占個位置,不覆蓋原先的內(nèi)容
類似ng里面 transclude (指令)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> <style> </style> </head> <body> <div id="box"> <aaa> <ul slot="ul-slot"> <li>1111</li> <li>2222</li> <li>3333</li> </ul> <ol slot="ol-slot"> <li>111</li> <li>222</li> <li>333</li> </ol> </aaa> <hr> <aaa> </aaa> </div> <template id="aaa"> <h2>xxxx</h2> <slot name="ol-slot">這是默認(rèn)的情況</slot> <p>welcome vue</p> <slot name="ul-slot">這是默認(rèn)的情況2</slot> </template> <script> var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ template:'#aaa' } } }); </script> </body> </html>
效果圖:
vue-> SPA應(yīng)用,單頁面應(yīng)用 vue-router路由
vue-resouce 交互
vue-router 路由
路由:根據(jù)不同url地址,出現(xiàn)不同效果
該課程配套用 0.7.13版本 vue-router
主頁 home
新聞頁 news
html:
<a v-link="{path:'/home'}">主頁</a> 跳轉(zhuǎn)鏈接 展示內(nèi)容: <router-view></router-view>
js:
//1. 準(zhǔn)備一個根組件 var App=Vue.extend(); //2. Home News組件都準(zhǔn)備 var Home=Vue.extend({ template:'<h4>我是主頁</h4>' }); var News=Vue.extend({ template:'<h4>我是新聞</h4>' }); //3. 準(zhǔn)備路由 var router=new VueRouter(); //4. 關(guān)聯(lián) router.map({ 'home':{ component:Home }, 'news':{ component:News } }); //5. 啟動路由 router.start(App,'#box');
跳轉(zhuǎn):
router.redirect({ '/':'/home' });
下載vue-router:
vue-router路由:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> <script src="bower_components/vue-router/dist/vue-router.js"></script> <style> </style> </head> <body> <div id="box"> <ul> <li> <a v-link="{path:'/home'}">主頁</a> </li> <li> <a v-link="{path:'/news'}">新聞</a> </li> </ul> <div> <router-view></router-view> </div> </div> <script> //1. 準(zhǔn)備一個根組件 var App=Vue.extend(); //2. Home News組件都準(zhǔn)備 var Home=Vue.extend({ template:'<h4>我是主頁</h4>' }); var News=Vue.extend({ template:'<h4>我是新聞</h4>' }); //3. 準(zhǔn)備路由 var router=new VueRouter(); //4. 關(guān)聯(lián) router.map({ 'home':{ component:Home }, 'news':{ component:News } }); //5. 啟動路由 router.start(App,'#box'); </script> </body> </html>
跳轉(zhuǎn):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script> <script src="bower_components/vue-router/dist/vue-router.js"></script> <style> </style> </head> <body> <div id="box"> <ul> <li> <a v-link="{path:'/home'}">主頁</a> </li> <li> <a v-link="{path:'/news'}">新聞</a> </li> </ul> <div> <router-view></router-view> </div> </div> <script> //1. 準(zhǔn)備一個根組件 var App=Vue.extend(); //2. Home News組件都準(zhǔn)備 var Home=Vue.extend({ template:'<h4>我是主頁</h4>' }); var News=Vue.extend({ template:'<h4>我是新聞</h4>' }); //3. 準(zhǔn)備路由 var router=new VueRouter(); //4. 關(guān)聯(lián) router.map({ 'home':{ component:Home }, 'news':{ component:News } }); //5. 啟動路由 router.start(App,'#box'); //6. 跳轉(zhuǎn) router.redirect({ '/':'home' //訪問根目錄時,跳轉(zhuǎn)到/home }); </script> </body> </html>
Vue是一套用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架,Vue與其它大型框架的區(qū)別是,使用Vue可以自底向上逐層應(yīng)用,其核心庫只關(guān)注視圖層,方便與第三方庫和項目整合,且使用Vue可以采用單文件組件和Vue生態(tài)系統(tǒng)支持的庫開發(fā)復(fù)雜的單頁應(yīng)用。
感謝各位的閱讀!關(guān)于“vue組件如何實現(xiàn)數(shù)據(jù)傳遞、父子組件數(shù)據(jù)獲取,slot,router路由功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學(xué)到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。