组件component（二）父组件和子组件之间传递数据
1.父组件=>子组件
由于组件实例的作用域是相互独立的，所以子组件的模板无法直接引用父组件的数据。可以通过props实现。是父组件用来传递数据的一个自定义属性，子组件需要**显式的用props选项**来声明Prop.
如果Prop传递的是一个数组或对象，那么它是按引用传递的。在子组件修改这个对象或者数组，则会影响父组件的状态
1.子组件=>父组件
如果子组件要把数据会传给父组件，需要使用自定义事件来实现。
父组件可以通过 v-on (缩写为 @) 来监听子组件实例的自定义事件，子组件可以直接使用 $emit 方法并传入事件名称来触发自定义事件
简单示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父组件和子组件之间互相传送数据</title>
<script src="js/v2.6.10/vue.min.js"></script>
</head>
<body>
<div id="app">
1.传递静态数据：<my-com my-message="新年快乐"></my-com>
2.传递动态数据：<my-com :my-message="msg"></my-com>
3.传递数组：<my-arr :arr='type'></my-arr>
4.传递对象：<my-obj :stu='stu'></my-obj>
5.传递对象属性：<my-obj2 v-bind='stu'></my-obj2>
<span :style="{fontSize:fz+'px'}">6.子组件回传数据：</span>
<my-font @action='rec'></my-font>
</div>
<script>
Vue.component('my-com',{
props:['myMessage'],
template:'<div>{{myMessage}}</div>'
})
Vue.component('my-arr',{
props:['arr'],
template:'<ol><li v-for="value in arr" >{{value}}</li></ol>'
})
Vue.component('my-obj',{
props:['stu'],
template:'<div>{{stu.name}}--{{stu.age}}--{{stu.sex}}</div>'
})
Vue.component('my-obj2',{
props:['name','age','sex'],
template:'<div>{{name}}--{{age}}--{{sex}}</div>'
})
Vue.component('my-font',{
template:'<div> \
<button @click="enlarge(5)">向上传递单个数据</button> \
<br><button @click="enlarge(childarr)">向上传递data中的对象据</button> \
</div>',
data(){
return{
childarr:{name:'张三',age:15,sex:'female'}
}
},
methods:{
enlarge(value){
console.log('enlare text--',value)
this.$emit('action',value)
}
}
})
var demo=new Vue({
el:'#app',
data:{
msg:'新年第一天',
type:['html','css','javascript'],
stu:{name:'zhangsan',age:20,sex:'female'},
fz:10
},
methods:{
rec(rec1){
console.log('父组件接收到的数据：',rec1);
this.fz+=rec1
}
}
})
</script>
</body>
</html>
