//有種形式的傳遞：從父到子，從子到父，平行級別的傳遞
//首先第一種：從父到子，用props屬性綁定
//父級數據：
new vue({
"el":"#app",
data:{
nickname:"小七"
}
})
//子組件：
vue.component("myComp",{
"props":{"username"}, //或者用["username"]
template:"<h1>歡迎{{username}}</h1>"
})
//頁面上：
//1，<my-comp v-bind:username="nickname"></my-comp>
//2，<my-comp :username="nickname"></my-comp>
//把父級數據傳給頁面上的 nickname，再在子組件中的username去取傳過來的值
//props:可以是對象{}也可以是數組[],如下：
props:{
"username":{
type:string,//數據類型
default:function(){//表示不傳值時的默認值為“游客”
return "游客";
}
}
}
//數據類型有：string\number\boolean\function\array\object
//
//第二種：從子到父 ，用自定義事件方法
//
//在vue1.0中 vue：$emit("事件名稱") //不會冒泡
// $dispatch("事件名稱") //會冒泡
//在vue2.0中 用$emit("事件名稱") 觸發事件，沒有$dispatch方法了
// 用$on("事件名稱") 監聽事件
//組件中定義函數名觸發事件時，不允許用駝峰法
//
//自定義事件命名問題:
//1，自定義事件的名稱不允許用駝峰法（盡量用動詞）
//2，自定義事件對應的函數名也不能用托峰法
//子級數據：
methods:{
add:function(){
this.$emit("myevent",this.count);
},
template:"<div @myevent='parentelent'></div>{{count}}"
}
//父級組件：
methods:{
"parentelent":function(msg){...} //msg就是拿到的count數據
}
//第三種，平行組件傳遞數據：用空實例搭建橋梁，如下
vue.component("mycomp1",{
"template":"<div>組件一<button v-on:click:'sendDate'></button></div>",//綁定點擊事件
data:function(){
return {
user:{id:1,name:"xzz"}
}
},
"methods":{
"sendDate":function(){//定義點擊事件
this.$emit('send',this.user);
}
}
});
vue.component("mycomp2",{
"template":"<div>{{template22}}組件二</div>",
created:function(){//生命周期
this.$on("send",function(datas){//datas就是傳入的user的數據
this.tempDate=datas;
})
},
data:function(){
return {"tempDate":"數據"}//用於保存數據
}
});
var bus=new Vue();//建一兩個組件的通信橋梁，是信息傳遞對象