本文實例講述了vue組件數據傳遞、父子組件數據獲取，slot,router路由功能。分享給大家供大家參考，具體如下：
一、vue默認情況下，子組件也沒法訪問父組件數據
<!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:'我是父組件的數據' } }, template:'<h2>我是aaa組件</h2><bbb></bbb>', components:{ 'bbb':{ template:'<h3>我是bbb組件->{{msg}}</h3>'//這里是子組件，是訪問不到父組件的數據msg } } } } }); </script></body></html>
二、數據傳遞
組件數據傳遞: √
1. 子組件獲取父組件data
在調用子組件：
<bbb :m="數據"></bbb>
子組件之內:
props:['m','myMsg']props:{ 'm':String, 'myMsg':Number}2. 父級獲取子級數據
*子組件把自己的數據，發送到父級
vm.$emit(事件名,數據);
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"> <h1>11111</h1> <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:'我是父組件的數據' } }, template:'#aaa', components:{ 'bbb':{ props:['mmm','myMsg'],//my-msg在這里要變成駝峰命名法 template:'<h3>我是bbb組件->{{mmm}} <br> {{myMsg}}</h3>' } } } } }); </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"> <h1>11111</h1> <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:'我是父組件的數據' } }, template:'#aaa', components:{ 'bbb':{ props:{ 'm':String,//注明數據類型 'myMsg':Number }, template:'<h3>我是bbb組件->{{mmm}} <br> {{myMsg}}</h3>' } } } } }); </script></body></html>2、 父級獲取子級數據
方法一：
<!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"> <h3>子組件-</h3> <input type="button" value="send" @click="send"> </template> <script> var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ data(){ return { msg:'我是父組件的數據' } }, template:'#aaa', methods:{ get(msg){ // alert(msg); this.msg=msg; } }, components:{ 'bbb':{ data(){ return { a:'我是子組件的數據' } }, template:'#bbb', methods:{ send(){ this.$emit('child-msg',this.a); } } } } } } }); </script></body></html>注意：
slot:位置、槽口
作用: 占個位置，不覆蓋原先的內容
類似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"> <h1>xxxx</h1> <slot name="ol-slot">這是默認的情況</slot> <p>welcome vue</p> <slot name="ul-slot">這是默認的情況2</slot> </template> <script> var vm=new Vue({ el:'#box', data:{ a:'aaa' }, components:{ 'aaa':{ template:'#aaa' } } }); </script></body></html>效果圖：
vue-> SPA應用，單頁面應用 vue-router路由
vue-resouce 交互
vue-router 路由
路由：根據不同url地址，出現不同效果
該課程配套用 0.7.13版本 vue-router
主頁 home
新聞頁 news
html:
<a v-link="{path:'/home'}">主頁</a> 跳轉鏈接 展示內容: <router-view></router-view>js:
//1. 準備一個根組件 var App=Vue.extend(); //2. Home News組件都準備 var Home=Vue.extend({ template:'<h3>我是主頁</h3>' }); var News=Vue.extend({ template:'<h3>我是新聞</h3>' }); //3. 準備路由 var router=new VueRouter(); //4. 關聯 router.map({ 'home':{ component:Home }, 'news':{ component:News } }); //5. 啟動路由 router.start(App,'#box');跳轉:
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. 準備一個根組件 var App=Vue.extend(); //2. Home News組件都準備 var Home=Vue.extend({ template:'<h3>我是主頁</h3>' }); var News=Vue.extend({ template:'<h3>我是新聞</h3>' }); //3. 準備路由 var router=new VueRouter(); //4. 關聯 router.map({ 'home':{ component:Home }, 'news':{ component:News } }); //5. 啟動路由 router.start(App,'#box'); </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> <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. 準備一個根組件 var App=Vue.extend(); //2. Home News組件都準備 var Home=Vue.extend({ template:'<h3>我是主頁</h3>' }); var News=Vue.extend({ template:'<h3>我是新聞</h3>' }); //3. 準備路由 var router=new VueRouter(); //4. 關聯 router.map({ 'home':{ component:Home }, 'news':{ component:News } }); //5. 啟動路由 router.start(App,'#box'); //6. 跳轉 router.redirect({ '/':'home' //訪問根目錄時，跳轉到/home }); </script></body></html>感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.VeVB.COm/code/HtmlJsRun測試上述代碼運行效果。
希望本文所述對大家vue.js程序設計有所幫助。
新聞熱點
疑難解答
