----父组件向子组件传值-----
1. 父：v-bind:obj="" 子：props=['obj'] 2. 父：引入组件上直接加属性name="zy" 子：用thid.$refs通过dom取到属性值zy
----子组件向父组件传值----
1. 子：$emit(事件名)传递信号 父：v-on:事件名="自身事件" 监听信号，一旦监听到，立即触发自身事件。 或者$on(事件名)监听。
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父子组件传值</title>
<script src="js/vue.js" type="text/javascript"></script>
<style type="text/css">
.app{
width:300px;
height: 300px;
border: 1px solid #00ff00;
}
.card{
width:200px;
height: 200px;
border: 1px solid #ff0000;
}
</style>
</head>
<body>
<div class="app">
<my-card v-bind:obj="colors" name="zy" v-on:listen="goto"></my-card>
</div>
<script>
/*
----父组件向子组件传数据-----
1. 父：v-bind:obj="" 子：props=['obj']
2. 父：引入组件上直接加属性name="zy"，子：用thid.$refs通过dom取到属性值zy
----子组件向父组件传数据-----
1. 子：$emit(事件名)传递信号 父：v-on:事件名="自身事件" 监听信号，一旦监听到，立即触发自身事件。 或者$on(事件名)监听。
*/
Vue.component("my-card",{
template:'<div class="card" ref="card" v-on:click.stop="toclick">12345678</div>',
props:['obj'],
data: function(){
return {
id: "我是子组件card"
}
},
methods:{
toclick: function(){
console.log("%%%%拿到props数据%%%%");
console.log(this.obj[0].color0);
console.log("%%%%拿到虚拟dom%%%%");
console.log(this.$refs.card);
console.log("%%%%拿到非prop传入的name的属性值%%%");
console.log(this.$refs.card.getAttribute('name'));
//向父组件发送信号
this.$emit('listen',this.id);
}
}
})
var app = new Vue({
el: ".app",
data: {
colors:[
{color0:'#0000ff'},
{color1:'#00ff00'}
]
},
methods:{
goto: function(msg){
alert("我监听到啦: " + msg);
}
}
});
//这种方法的意义何在
// app.$on('test', function(msg){
// alert("我监听到啦: "+msg);
// });
// app.$emit('test','hello');
</script>
</body>
</html>
