vue组件化开发学习笔记-2-组件间的数据交互

一，父组件向子组件传值

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/base.css"/><style type="text/css">#app{width: 20%;margin: 200px auto;border: 1px solid #ccc;line-height: 30px;padding: 20px;}</style></head><body><div id="app"><div>{{fathermsg}}</div><menu-item title="fathermsg"></menu-item><!-- 未绑定属性，传的直接就是数据了，而不是父组件的内容 --><menu-item :title="fathermsg"></menu-item><menu-item :title="p"></menu-item><!-- 在父组件中，数据照常写，使用子组件的标签时，需要父组件的哪个数据，就利用属性绑定哪个 --><!-- 在子组件中，需要有props，值是对象，来接收传递进来的数据 --><!-- 属性可以传递多个 --></div><script type="text/javascript" src="js/vue.min.js"></script><script type="text/javascript">//父组件向子组件传值Vue.component('menu-item',{props:['title'],// 这里设置接收的属性值data:function(){return {msg: '子组件本身的数据'}},template: '<div>{{msg+"---"+title}}</div>'})var vm= new Vue({el:'#app',data:{fathermsg: '父组件中的内容',p:"父组件中动态绑定的属性"},components:{}})</script></body>
</html>

二，props属性名规则

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/base.css"/><style type="text/css">#app{width: 20%;margin: 200px auto;border: 1px solid #ccc;line-height: 30px;padding: 20px;}</style></head><body><div id="app"><div>{{fathermsg}}</div><menu-item :my-title="fathermsg"></menu-item></div><script type="text/javascript" src="js/vue.min.js"></script><script type="text/javascript">//父组件向子组件传值Vue.component('menu-item',{props:['myTitle'],// 这里设置接收的属性值data:function(){return {msg: '子组件本身的数据'}},template: '<div>{{msg+"---"+myTitle}}</div>'})var vm= new Vue({el:'#app',data:{fathermsg: '父组件中的内容',p:"父组件中动态绑定的属性"},components:{}})</script></body>
</html>

也就是说，在定义组件时使用驼峰式，使用组件标签时，用横杠。

三，props属性值类型

<script type="text/javascript">//父组件向子组件传值Vue.component('menu-item',{props:['num1','str2','bool3','arr4','object5'],// 这里设置接收的属性值data:function(){return {msg: '子组件本身的数据'}},template: `<div><div>{{num1}}</div><div>{{str2}}</div><div>{{bool3}}</div><ul><li :key="index" v-for="(item,index) in arr4">{{item}}</li></ul><div><span>{{object5.name}}</span><span>{{object5.age}}</span></div></div>`})var vm= new Vue({el:'#app',data:{arr:["first","second"],str:"我是字符串",obj:{name:"张三",age:12}},components:{}})</script>

使用组件时：

<div id="app"><menu-item :num1="12" :str2="str" :bool3="true" :arr4="arr" :object5="obj"></menu-item></div>

结果;

四，子组件向父组件传递信息

如果子组件可以直接更改父组件中的值，那样程序会变得很乱，为了避免这种情况的发生，尽量不要在子组件中直接修改父组件的数据，也就是说：props的传递数据原则：单向数据流！

#app内部都是父组件的内容，子组件是这个menu-item标签定义的内容。
里面的那个button绑定了一个事件，在这里接收这个事件enlarge，然后绑定到父组件的事件handle中去，从而改变父组件的值**。实际上，就是调用了父组件内部的函数，来改变父组件。**

 //子组件信息Vue.component('menu-item',{props:['arr4'],template: `<div><ul><li :key="index" v-for="(item,index) in arr4">{{item}}</li></ul><button @click='$emit("enlarge")'>扩大父组件字体</button></div>`})var vm= new Vue({el:'#app',data:{msg:"父组件信息",arr:["first","second"],fontSize:10},methods:{handle:function(){this.fontSize+=5}}})

<div id="app"><div :style='{fontSize:fontSize+"px"}'>文字</div><menu-item :arr4="arr" @enlarge="handle"></menu-item><!-- #app内部都是父组件的内容，子组件是这个menu-item标签定义的内容里面的那个button绑定了一个事件，在这里接收这个事件enlarge，然后绑定到父组件的事件handle中去从而改变父组件的值。实际上，就是调用了父组件内部的函数，来改变父组件。 --></div>

五，子组件向父组件传递信息

和四中的内容是差不多的，只是增加了一个参数（信息）。而在父组件中接收参数，则是用指定的$event

//子组件信息Vue.component('menu-item',{template: `<button @click='$emit("enlarge",20)'>扩大父组件字体</button>`})var vm= new Vue({el:'#app',data:{fontSize:10},methods:{handle:function(val){this.fontSize+=val}}})

<div id="app"><div :style='{fontSize:fontSize+"px"}'>文字</div><menu-item  @enlarge="handle($event)"></menu-item><!-- //在这里，把参数传递进去，只能用$event --></div>

六，兄弟组件之间的传值

至于要销毁事件，则只要把两个兄弟组件沟通的桥梁，也就是事件中心销毁就可以了！
要销毁事件中心，vue提供了一个方法$off，用来销毁事件：

<button @click="handle">销毁事件中心</button>

然而这个handle函数定义在父组件当中：

          var vm= new Vue({el:'#app',data:{fontSize:10},methods:{handle:function(val){hub.$off('tom-event')hub.$off('jery-event')}}})

也就是说，兄弟组件之间的通信，有以下几个步骤：
1，创建事件中心：

var hub =new Vue()

2，在对应子组件中利用mounted属性，设置事件的监听：
当vue对象初始化完成后，这里就开始监听，利用的是事件中心的$on方法，第一个参数是定义的事件名称，第二个参数是要做的函数，使用箭头函数是为了让this指向本组件的vue对象。

                 mounted:function(){//监听事件hub.$on('tom-event',(val)=>{this.num+=val})}

3，在本组件中定义handle函数，在handle函数中，通过事件中心的$emit（）方法来调用对应的事件（定义在其他兄弟组件中），第一个参数是对应的事件名称，第二个参数是需要传入的值。

             methods:{handle:function(){hub.$emit('jery-event',1)//通过事件中心，调用jerry-event函数，参数是1},},

4，在html结构模板中定义函数

一旦点击，则执行本组件的handle函数,从而通过事件中心的hub.$emit方法，传入参数并执行定义在另一组件中的事件，

<button @click='handle'>点击<button>

5，事件的销毁
依旧是利用事件中心的$off方法，参数是想要删除的事件名称即可：

             handle:function(val){hub.$off('tom-event')hub.$off('jery-event')}