vue组件之间的通信（数据的传递）

组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。它们之间必然需要相互通信：父组件可能要给子组件下发数据，子组件则可能要将它内部发生的事情告知父组件。然而，通过一个良好定义的接口来尽可能将父子组件解耦也是很重要的。这保证了每个组件的代码可以在相对隔离的环境中书写和理解，从而提高了其可维护性和复用性。

在 Vue 中，父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息。

父组件的data写法与子组件的data写法不同

//父组件
data:{
    //对象形式
}

//子组件
data:function(){
  return {
       //函数形式  
   }
}

几种常见的传递数据的方式 

 1、父组件传递数据到子组件

       (1) props第一种写法
          

  	     Vue.component("my-component", {
                props: ['msg'],
                template: "
child component,{{msg}}
"
            }) 

(2) props第二种写法
            

	    Vue.component("my-component", {
                props: {
                   msg:{
                        required:true/false   //代表改变是否必须
                        type:String/Array/Number/Object //传入的变量的类型检查
                   },
                   names:{
                       required:false,
                       type:Array
                   }
                },
                template: "
child component,{{msg}}
"
            }) 

2、子组件如何传递数据给父组件

     (1)通过发送事件的方式实现

     (2)发送事件的过程
      

  	//使用组件
             

                
            


        //定义组件
            Vue.component("child-component", {
            template: "#child",
            methods: {
                send() {
                    //子组件向父组件传递数据的方式，是通过事件触发
                    this.$emit("aaa", "green")


                    //myevent---->子组件向父组件发送的事件名称
                    //green----->是发送的数据
                }
            }
        })


        //创建vue实例
        new Vue({
            el: ".box",
            data: {
                bgColor: 'red'
            },
            methods: {
                handle(data) {
                    this.bgColor = data
                }
            }
        })

3、非父子组件的通信

        (1) 解决方案
             通过中间桥梁实现非父子组件之间的通信

        (2) 实现过程
           

         //创建一个非父子组件之间通信的中间桥梁
            var hub = new Vue()


            //第一个组件
            Vue.component("first-component",{
                template:"
发送事件
",
                methods:{
                    send(){
                        //通过中间hub发送事件
                        hub.$emit("tosecond","some data....")
                    }
                }
            })


            //第二个组件
            Vue.component("first-component",{
                template:"
发送事件
",
                created:function(){
                    //通过hub监听事件
                    hub.$on("tosecond",function(data){
                        //data---->hub发送事件时所携带的参数
                    })
                }
            })

4、组件的简单应用 

写一个星星评分的简单例子

	
	
	
	


	

		

			

				
				
				
{{item.title}}