vue教程3-05 vue組件數據傳遞
一、vue默認情況下，子組件也沒法訪問父組件數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="bower_components/vue/dist/vue.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="bower_components/vue/dist/vue.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="bower_components/vue/dist/vue.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="bower_components/vue/dist/vue.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>
注意：
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="bower_components/vue/dist/vue.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-> 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="bower_components/vue/dist/vue.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="bower_components/vue/dist/vue.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>