這篇文章給大家分享的是有關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:'<h3>我是aaa組件</h3><bbb></bbb>', components:{ 'bbb':{ template:'<h4>我是bbb組件->{{msg}}</h4>'//這里是子組件，是訪問不到父組件的數據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">
<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:'我是父組件的數據'
}
},
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:'我是父組件的數據'
}
},
template:'#aaa',
components:{
'bbb':{
props:{
'm':String,//注明數據類型
'myMsg':Number
},
template:'<h4>我是bbb組件->{{mmm}} <br> {{myMsg}}</h4>'
}
}
}
}
});
</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">
<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:'我是父組件的數據'
}
},
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>注意：
vm.dispatch(事件名,數據)子級向父級發送數據vm.dispatch(事件名,數據)子級向父級發送數據vm.broadcast(事件名,數據) 父級向子級廣播數據
配合: event:{}
在vue2.0里面已經，報廢了
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">
<h2>xxxx</h2>
<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:'<h4>我是主頁</h4>'
});
var News=Vue.extend({
template:'<h4>我是新聞</h4>'
});
//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:'<h4>我是主頁</h4>'
});
var News=Vue.extend({
template:'<h4>我是新聞</h4>'
});
//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:'<h4>我是主頁</h4>'
});
var News=Vue.extend({
template:'<h4>我是新聞</h4>'
});
//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>Vue是一套用于構建用戶界面的漸進式JavaScript框架，Vue與其它大型框架的區別是，使用Vue可以自底向上逐層應用，其核心庫只關注視圖層，方便與第三方庫和項目整合，且使用Vue可以采用單文件組件和Vue生態系統支持的庫開發復雜的單頁應用。
感謝各位的閱讀！關于“vue組件如何實現數據傳遞、父子組件數據獲取，slot,router路由功能”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
